alternativa iframe

dadoge

alternativa iframe

Ho cercato sul forum ma anche se il problema è stao posto non ho trovato una soluzione, lo ripropongo sperando sia di interesse...

Sono alla ricerca di un'alternativa all'utilizzo di un iframe su un sito sviluppato in wordpress, in html avrei trovato la soluzione utilizzando jquery e con queste 4 righe di codice risolvo il problema...

...in pratica carico in un div la pagina da visualizzare...

non ho grande esperienza di php e sviluppo di wordpress, come posso fare a fargli digerire questo codice? Ho provato ad inserirlo nella pagina, a creare un template, a metterlo nell'header...ma in nessun caso funziona...

Qualcuno può darmi un suggerimento utile?

Molte Grazie

dadoge

mi do una prima risposta, in effetti non avevo fatto questa verifica...

intanto manca un pezzettino di codice ovvero cosa fa la funzione in caso di successo, quindi per testarlo ho messo un alert

il problema sorge se il file da caricare è esterno al dominio, infatti facendogli caricare una pagina di wordpress funziona...quindi dovrebbe essere un problema di protezione...

idea stupida e se creo una pagina wordpress che reindirizza la pagina esterna? Però usando il plugin redirection non funziona...idee?

skylinx

Ti sei risposto da solo E' dovuto alla Same Origin Policy; a causa di restrizioni di sicurezza AJAX requests non possono caricare contenuti da un altro dominio (o anche dallo stesso dominio ma con subdomain/porta/protocollo diversi).

Un modo per ovviare al problema e' creando un "reserve proxy" nel tuo dominio che carichi il contenuto server side (invece che client side con AJAX) dal dominio esterno e lo faccia "apparire" come proveniente dal tuo dominio. In questo modo potresti poi caricare quel contenuto attraverso AJAX dal tuo dominio, senza problemi. Potresti farlo almeno in un paio di modi: 1) con una semplice pagina PHP nel tuo sito visto che usi gia' Wordpress, 2) con qualcosa tipo mod_proxy per Apache o simili a seconda del web server che usi. Ma anche in questo caso ci potrebbero essere problemi di sicurezza a seconda del tipo di contenuto che carichi etc. Ci sono anche dei proxy CORS (cross-origin resource sharing) di terzi in rete, dai una occhiata... ma se fidarti o no dipende dal contenuto - non dovrebbero esserci problemi ovviamente se si tratta di qualcosa di pubblico che vuoi semplicemente aggiungere ad una tua pagina.

SE poi hai ACCESSO al sito esterno tu stesso (e.g. se e' un tuo sito), allora potresti semplicemente configurare CORS per quel sito, in modo che consenta richieste AJAX dal tuo dominio. Questa e' la soluzione piu' semplice. Un'alternativa, potrebbe essere JSONP, da escludere pero' a meno che il sito esterno sia sotto il tuo controllo (il motivo e' che aggiungi uno script tag alla tua pagina e quindi devi fidarti dello JavaScript che ti viene caricato dal sito esterno).

In realta' ci sono altri modi... cmq il piu' semplice se hai accesso al sito esterno e' configurare CORS.

dadoge

...ti ringrazio per la risposta, in linea di principio ho capito ma metterlo in pratica mi viene male, ti spiego la situazione:

sul vecchio sito (che gestisco io) ho un'area riservata in asp da cui accedo da un semplice form user e password, visto che funziona vorrei mantenere tutta la struttura e quindi vorre riportare sul nuovo sito in wordpress semplicemente il form per poi una volta autenticato accedere all'area riservata del vecchio sito in un'altra finestra/scheda. Volevo farlo con un iframe ma con firefox non lo visualizza...potrei fregarmene imponendo l'uso di chrome...ma mi sono intestardito nel voler trovare una soluzione alternativa...

quindi dovrei implementare CORS sul vecchio sito...e come?

Grazie per la pazienza

Buona serata

skylinx

Ciao,

l'applicazione e' classic ASP o ASP.NET? Se e' ASP.NET, prova ad aggiungere al tuo web.config questo:




<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

dadoge

grazie alle tue indicazioni avevo visto quanto mi suggerisci, ma ho il sito in asp classico...

a parte questo, ho provato ad inserire il codice in webconfig, ho creato una pagina di test salvata in aspx (un semplice Hello World scopiazzato in rete che in effetti sul sito vecchio viene visualizzato)...dovrebbe andare ugualmente, o no? non so se centra il fatto che ho il dominio registrato su Aruba, c'è qualche altra prova che posso fare?

skylinx

L'importante e' che la pagina ASP col contenuto che vuoi fare apparire su Wordpress sia inviata dal server con l'header "Access-Control-Allow-Origin". Prova ad aggiungere questo in cima al file .asp questo:

Response.AddHeader "Access-Control-Allow-Origin","*"

dadoge

porta pazienza ma di asp net non so nulla, vedo in giro soluzioni ma non capisco come implementarle, sul vecchio sito ho messo la pagina test.aspx



<%@ Page Language="VB" %>

<script runat="server">
    Private Sub Page_Load(sender As Object, e As EventArgs)
        Messaggio.Text = "Hello World!"
    End Sub
</script>
<html>
    <head>
        <title>La mia prima pagina ASP.NET</title>
    </head>
<body>

<form id="Modulo" runat="server">
    
    <asp:Label id="Messaggio" runat="server"></asp:Label>
</form>

</body>
</html>

ed ho modificato il web.config come mi hai detto, sul nuovo sito la richiamo così



<div id="risultato"></div>
<p>&nbsp;</p>

  <script>
jquery('risultato').load('hxxp://xxx.vecchiosito.com/test.aspx', function() {
    ;
});
;
</script>

l'istruzione che dici con che sintassi devo metterla?

skylinx

Se l'applicazione e' ASP.NET (mi sembrava di aver capito che si trattasse di classic ASP e non ASP.NET...) e hai fatto le modifiche al web.config dovrebbe funzionare. Hai provato? Ricevi lo stesso errore? Hai provato a riavviare la app?

dadoge

ho fatto una cosa molto più "meschina" ho scopiazzato un po' di codice ASP NET trattandolo (nella mia ignoranza) come fosse un linguaggio normale, ribadisco di ASP NET non so nulla...volevo solo capire se poteva funzionare

confermo che il sito è in asp classico, quindi il tentativo in ASP NET non mi avrebbe risolto il problema

skylinx

Allora prova ad aggiungere la riga che ti ho suggerito prima nel file .asp che vuoi caricare nell'altro sito.


Response.AddHeader "Access-Control-Allow-Origin","*"

dadoge

Niente da fare, temo dovrò arrendermi, questa è la pagina che voglio richiamare


<%@LANGUAGE="JAVASCRIPT"%>
<%
Response.AddHeader("Access-Control-Allow-Origin", "*")
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "hxxp://xxx.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="hxxp://xxx.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
prova inclusione pagina
</body>
</html>

ma non produce effetto, la pagina sul sito vecchio si vede, sul sito wordpress se provo a richiamare una pagina dello stesso dominio si vede...ma se richiamo la pagina dal vecchio sito non la visualizza...ovvero l'istruzione Access-Control-Allow-Origin non produce effetto ho provato anche a sostituire * con il nome del dominio richiedente ma senza successo...da quel che ho letto in giro è la strada giusta ma non capisco dove sta il problema...

Saluti

skylinx

Mai arrendersi

Nei dev tools per es. di Chrome verifica se quel response header compare oppure no.

dadoge

per natura sono tenace, altrimenti non starei qui a picchiarmi...

Chrome dice


autoptimize_e312709e69add248829d1e9b94b15389.js:3 JQMIGRATE: Migrate is installed, version 1.4.1
(index):40 Uncaught TypeError: $(...).bxSlider is not a function
    at HTMLDocument.<anonymous> ((index):40)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ (index):40
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2
(index):1 XMLhxxpRequest cannot load hxxps://xxx.guidasi.com/test.asp. The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'hxxps://xxx.guidasiblog.com' is therefore not allowed access.
jquery-1.10.2.js:8706 XHR failed loading: GET "hxxps://xxx.guidasi.com/test.asp".
send @ jquery-1.10.2.js:8706
ajax @ jquery-1.10.2.js:8136
jQuery.fn.load @ jquery-1.10.2.js:7745
(anonymous) @ (index):73
(index):76 GET hxxps://xxx.guidasiblog.com/wp-content/plugins/jetpack/_inc/social-logos/data:application/x-font-woff;charset=utf-8;base64,

comunque se vuoi verificare, sito e pagina da caricare sono:


hxxps://xxx.guidasiblog.com/area-fad-formazione-elearning/

hxxp://xxx.guidasi.com/test.asp

The 'Access-Control-Allow-Origin' header contains multiple values....potrebbe essere dovuto al fatto che è sia nella pagina che nel web.config...proverò a toglierlo dal web.config ma non penso sia quello il problema...

skylinx

Invece e' proprio quello il problema, perche' soltanto un valore e' ammesso. Se ve ne sono piu' di uno, l'accesso alla pagina e' negato.

"[...]but only one is allowed. Origin 'h t t p://w w w .guidasiblog.com' is therefore not allowed access."

dadoge

SEI UN GRANDE!!! FUNZIONA...la pagina si vede, naturalmente l'accesso all'area riservata non funziona ma questo è un problema a parte su cui indagherò a mente fresca...farò un post conclusivo riassumendo il problema e relativa soluzione a beneficio di tutti...

mille grazie ed a buon rendere...
Buona Notte

dadoge

OK, anche il problema di accesso all'area riservata è risolto, in effetti la gestione è un po' diversa dall'iframe...

Anche se l'utilizzo di questa procedura, visivamente produce lo stesso effetto dell'iframe dal punto di vista funzionale c'è una certa differenza, ovvero se con l'iframe a tutti gli effetti lavoro sul form che risiede sul sito vecchio e la procedura di login si appoggia sul database di quel sito, caricando invece la pagina con jquery la gestione dello script diventa locale sul sito nuovo quindi tentando di fare il login la procedura fallisce non trovando il collegamento al database (il senso penso sia questo, magari a livello di programmazione la cosa è un po' diversa), ho risolto la cosa creando un form con campi user e password e li passa tramite get come parametri url ad una pagina di verifica in cui vengono confrontati con quelli presenti nel database, se c'è corrispondenza fa il login altrimenti ritorna tramite refer alla pagina precedente ovvero quella del login...direi che funziona tutto correttamente...

Quindi a beneficio di tutti riepilogo tutta la procedura:

Problema: ho l'esigenza di visualizzare una pagina html ospitata in un vecchio sito che gestisco io all'interno di una pagina di WordPress, cosa che si risolverebbe agevolmente utilizzando un iframe.
Visto che in wordpress ed in generale, l'utilizzo dell'iframe non è ben visto da tutti i browser (firefox non li visualizza altri browser pare non abbiano problemi almeno nelle versioni più recenti), dal W3C e nelle politiche SEO, mi sono messo alla ricerca di una valida alternativa.

Ho individuato la soluzione utilizzando jquery e con queste 4 righe di codice che carica in un div la pagina da visualizzare:


 
<script src="hxxps://code.jquery.com/jquery-1.10.2.js"></script> (superfluo in wordpress è già caricata jquery)
<div id="risultato"></div>
<p>&nbsp;</p>
  <script>
$('#risultato').load('hxxp://xxx.pagina-da-visualizzare.html', function() { 
});
;
</script>

lo script funziona correttamente se voglio caricare una pagina presente sullo stesso dominio, ad esempio una pagina di wordpress ma fallisce se si tenta di caricare (come nel mio caso) una pagina da un dominio diverso, ciò è dovuto citando SkyLinx

...alla Same Origin Policy; a causa di restrizioni di sicurezza AJAX requests non possono caricare contenuti da un altro dominio (o anche dallo stesso dominio ma con subdomain/porta/protocollo diversi).

Soluzione: inserire nella pagina richiamata dal dominio esterno:


Response.AddHeader "Access-Control-Allow-Origin","*"

a titolo di esempio la pagina richiamata potrebbe essere quindi:



<%@LANGUAGE="JAVASCRIPT"%>
<%
Response.AddHeader("Access-Control-Allow-Origin", "*")
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "hxxp://xxx.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="hxxp://xxx.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
prova inclusione pagina
</body>
</html>

et Voilà il problema è risolto...

Un grande ringraziamento va a SkyLinx senza il cui apporto starei ancora ad arrovellarmi...spero che tutta questa fatica sia utile anche ad altri...

skylinx

Figurati