Dans le développement front-end, il existe des problèmes inter-domaines entre la page intégrée de et la page parent. Le domaine est composé du protocole, du nom d'hôte et du numéro de port, par exemple "https://example". .com:8080", si Si le domaine de la page intégrée est différent de celui de la page parent, vous rencontrerez des problèmes inter-domaines. En effet, le navigateur limite l'exécution de scripts inter-domaines pour des raisons de sécurité afin d'empêcher les logiciels malveillants. attaques de script. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202311/27/2023112711344560636.jpg" alt="Quel est le domaine de l'iframe" ></p> <p>Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3. </p> <div id="chat-messages"><div><article><p>Dans le développement front-end, il existe des problèmes inter-domaines entre la page intégrée dans <iframe> et la page parent (c'est-à-dire la page contenant <iframe>) car leurs domaines (également appelés "sources") sont différents. </p> <p>Le domaine est composé du protocole, du nom d'hôte et du numéro de port, tel que https://example.com:8080. Si la page intégrée possède un domaine différent de celui de la page parent, vous rencontrerez des problèmes inter-domaines. En effet, les navigateurs limitent l'exécution de scripts inter-domaines pour des raisons de sécurité afin d'empêcher les attaques de scripts malveillants. </p> <p>Afin de résoudre le problème inter-domaines, vous pouvez définir le domaine de <iframe> via les méthodes suivantes : </p> <ol style="margin-bottom: 16px; padding-left: 2em;"><li>Utiliser l'attribut sandbox : L'attribut sandbox peut être utilisé pour limiter les fonctions de <iframe> pages intégrées, réduisant ainsi ses risques de sécurité. Dans le même temps, il peut également être utilisé pour définir le domaine <iframe>. Par exemple : </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><iframe src="https://example.com" sandbox="allow-same-origin">Copier après la connexion Ici, le domaine est défini pour être le même que la page parent, c'est-à-dire que seules les ressources appartenant au même domaine que la page parent peuvent être chargées. </p> <ol start="2" style="margin-bottom: 16px; padding-left: 2em;"><li>Définissez document.domain dans la page intégrée : si le nom de domaine principal de la page intégrée et celui de la page parent sont identiques, vous pouvez lever la restriction inter-domaines en définissant document.domain dans les deux pages. Par exemple : </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 父页面 --> <script> document.domain = 'example.com'; </script> <iframe src="https://sub.example.com">Copier après la connexion document.domain = 'example.com'; Copier après la connexion Utiliser l'API postMessage : l'API postMessage peut être utilisée pour transmettre des messages entre les fenêtres afin d'établir une communication entre domaines. Une communication interdomaine sécurisée peut être obtenue en utilisant la méthode window.postMessage() dans la page parent et la page intégrée pour envoyer et recevoir des messages respectivement. Il convient de noter qu'il n'est pas recommandé d'utiliser pour intégrer du contenu provenant d'autres domaines, sauf si cela est nécessaire, car cela peut introduire des vulnérabilités de sécurité et des problèmes de performances. </p></article></div></div>
