ARTICLE AD BOX
I have a container webpage A and it has two iframes. First iframe loads a webpage B which has a single url pointing to an external website. When i click this url, it sends message via PostMesssage to the container webpage A with the link that was clicked on. Obviously I am not loading the clicked link in 1st iframe (web page B) but want to load the page in 2nd iframe via container webpage A.
Here's the structure of the web pages:
Container Web page A
<html> <head> <script> window.addEventListener( 'message', onMessageReceived ); function onMessageReceived( e ) { const msg = e.data; console.log(msg.data); document.getElementById("post_page").src=msg.data; } </script> <style> a { text-decoration: none; } </style> </head> <body> <iframe id='cl_posts' src="clposts.html" height="100%" width="50%"></iframe> <iframe id='post_page' src="post.html" ></iframe> </body>1st iframe src (web page B)
<head> <meta http-equiv="Content-Security-Policy" content="frame-src *; img-src *"> <style> table th{ text-align: center; } a { text-decoration: none; } </style> <script> if( window.parent ) { document.addEventListener( 'click', onDocumentKeyUpPostMessageToParent ); } function onDocumentKeyUpPostMessageToParent( e ) { e.preventDefault(); const msg = { data: e.currentTarget.activeElement.attributes['href'].value }; const targetOrigin = '*'; // This MUST exactly match the origin of the <iframe>'s host-page (note that an "Origin" is *NOT* the page's full URI). window.parent.postMessage( msg, targetOrigin ); } </script> </head> <body> <table><thead> <tr> <th style='text-align: center;'>cpg</th> </tr> </thead> <tr> <td width='10%'>1</td> <td id='1'><a href="https://atlanta.xyz.org/newport.html">Recovery Support Study</a></td> </tr></table>All the three pages (the third page is just a skeleton/place holder) are local and are not hosted via webserver (local or external). just three pages in a folder.
When i click on the link in web page B, i get the following error in chrome:
Framing 'https://atlanta.xyz.org/' violates the following Content Security Policy directive: "frame-ancestors https://*.xyz.org". The request has been blocked.
what do i do get rid of this error?
