HTML locale e iframe

**fermat** · 28-02-2024, 20:16

ciao!

premetto che ho cercato come risolvere ma non sono riuscito.
non so se non è proprio fattibile, oppure il mio caso è particolare.

cerco di spiegarmi meglio possibile.
su un pc, che è uno di quei "chioschi" che trovate nei supermercati, devo aprire con edge un file html locale con dentro varie cose tra cui un iframe che mostra una pagina di un sito che gira in HTTP.
non HTTPS, e non posso modificare questa cosa (il sito remoto gira tutto in HTTP).

ho provato:

codice:

<!DOCTYPE html>
<html lang="it">


  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
  </head>


  <body>


    <iframe src="http://www.sito.local/#/1" title="Test"></iframe>


  </body>


</html>

ed ottengo questo in console:

codice:

Refused to display 'http://www.sito.local/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(indice):2054  Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at onResize ((indice):2054:38)
    at HTMLDocument.setupMobileNav ((indice):2081:3)
(indice):2635  Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLDocument.onDocumentLoad ((indice):2635:19)

come detto non posso far girare il sito in HTTPS, anche se non credo sia quello il problema, ma posso caricare sul server file htaccess o cose così.
in realtà posso mettere mano a tutto il server, tranne al discorso HTTPS (non chiedete perchè dovrei aprire un vaso di pandora.....).

qualche idea??
o non è proprio fattibile?

**abellos** · 29-02-2024, 11:55

Ciao Fermat,
devi impostare un header nella pagina dove inserisci il frame ed abilitare il sito remoto, dovresti usare una cosa del genere

response.addheader "X-Frame-Options", "ALLOW-FROM https://example.com"

ma come scritto qui How to use X–Frame–Options's `ALLOW–FROM` directive · helmetjs/helmet Wiki · GitHub e' obsoleto, devi usare il content security policy frame-ancestors sempre negli header

**fermat** · 29-02-2024, 15:29

ciao!

la pagina remota è scritta usando angular.
quindi penso di dover mettere tipo questa impostazione nella configurazione di apache:

codice:

Header always set X-Frame-Options "SAMEORIGIN"

però al posto di SAMEORIGIN che dovrei mettere??
il file html dove devo mettere l'iframe è in locale sul chiosco!

**abellos** · 29-02-2024, 17:21

in teoria dovresti mettere la direttiva X-Frame-Options sulla pagina dove devi inserire il tuo iframe, in modo da permettere di vedere la risorsa remota nell'iframe.
Ma se devi metterlo nella pagina html padre (quella che contiene l'iframe) puoi provare a vedere se con i metatag funziona, vedi qui html - X-Frames-Options in the meta tag - Stack Overflow

**abellos** · 29-02-2024, 17:25

Prova anche questo

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none' https://www.example.org;">

edit
questo e' corretto

<meta http-equiv="Content-Security-Policy" content="frame-src https://www.example.org;">

dalla guida mozilla
Note: frame-src allows you to specify where iframes in a page may be loaded from. This differs from frame-ancestors, which allows you to specify what parent source may embed a page.

**fermat** · 01-03-2024, 10:01

ciao!

ok quindi questo lo devo mettere sulla pagina remota:

codice:

<meta http-equiv="Content-Security-Policy" content="frame-src https://www.example.org;">

ma visto che il file locale sta in un pc, al posto di https://www.example.org che dovrei mettere??

**abellos** · 01-03-2024, 11:46

il sito web da visualizzare nell'iframe

**fermat** · 01-03-2024, 12:13

ok provato così:

codice:

<!DOCTYPE html>
<html lang="it">


  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="frame-src http://testallergeni.demsupermercati.local/#/1">
    <title>Test</title>
    <script src="js/script.js"></script>
  </head>


  <body>


    <iframe src="http://www.sito.local/#/1" title="Test"></iframe>


  </body>


</html>

questo quello che ho in console:

codice:

The source list for Content Security Policy directive 'frame-src' contains a source with an invalid path: '/#/1'. The fragment identifier, including the '#', will be ignored.
about:blank:1 The source list for Content Security Policy directive 'frame-src' contains a source with an invalid path: '/#/1'. The fragment identifier, including the '#', will be ignored.
chromewebdata/:1 Refused to display 'http://www.sito.local/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

il problema dell'hashtag ok dipende anche da angular, magari posso risolverlo a monte.
ma cmq mi blocca se ho capito bene!

**abellos** · 01-03-2024, 17:22

**fermat** · 01-03-2024, 20:11

ciao!

ehm no, mi sa che mi spiego male io.
resetto!

allora, il sito che devo vedere comprende anche l'#/1, senno non si vede.
quell'1 in realtà è fondamentale perchè è un parametro che indica che dati prendere.

ma non è questo il problema su cui non mi spiego.
quindi resetto.

------------
la pagina remota è http://testallergeni.demsupermercati.local/#/1 (avevo messo www.sito.local per nascondere il nome, ma va bene uguale).
quell'1 in realtà è fondamentale perchè è un parametro che indica che dati prendere.
senza quello la pagina andrebbe in errore.

ma cosa più importante, non c'è un sito locale!
il file è un semplice file html che sta un pc dentro al supermercato.
non c'è un server nel supermercato, quel file viene visualizzato in modalità chiosco.
il pc si apre con edge e carica quel file che sta sul desktop.

quindi non c'è un sito locale e uno remoto.
c'è un file html locale con dentro un iframe che deve vedere il sito remoto.

spero di essere stato più chiaro!

Discussione: HTML locale e iframe

Strumenti discussione

Ricerca discussione

Visualizza

HTML locale e iframe

Permessi di invio