mub*_*ubi 487 javascript iframe jquery same-origin-policy
我正在<iframe>我的HTML页面中加载一个并尝试使用Javascript访问其中的元素,但是当我尝试执行我的代码时,我收到以下错误:
SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.
你能帮我找一个解决方案,以便我可以访问框架中的元素吗？
我正在使用此代码进行测试,但徒劳无功:
$(document).ready(function() {
var iframeWindow = document.getElementById("my-iframe-id").contentWindow;
iframeWindow.addEventListener("load", function() {
var doc = iframe.contentDocument || iframe.contentWindow.document;
var target = doc.getElementById("my-target-id");
target.innerHTML = "Found it!";
});
});
Mar*_*lli 739
不要与CORS混淆!
您无法<iframe>使用JavaScript 访问具有不同来源的内容,如果您可以这样做,那将是一个巨大的安全漏洞.对于同源策略 浏览器阻止尝试访问具有不同源的帧的脚本.
如果不维护地址的以下部分中的至少一个,则认为原点不同:
<protocol>://<hostname>:<port>/path/to/page.html
如果要访问框架,协议,主机名和端口必须与您的域相同.
以下是尝试访问以下URL的情况 http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
尽管同源策略阻止脚本访问具有不同来源的站点内容,但如果您拥有这两个页面,则可以使用window.postMessage及其相对message事件来解决此问题,以在两个页面之间发送消息,如下所示:
在您的主页面中:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
在你的postMessage()(包含在主页面):
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
此方法可以在两个方向上应用,也可以在主页面中创建侦听器,并从帧接收响应.同样的逻辑也可以在弹出窗口中实现,并且基本上由主页面生成的任何新窗口(例如使用'*')也可以实现,没有任何区别.
关于这个主题已经有了一些很好的答案(我只是发现它们谷歌搜索),因此,对于可能的浏览器,我将链接相关的答案.但请记住,禁用同源策略(或CORS)只会影响您的浏览器.此外,运行具有相同来源安全设置的浏览器会禁止任何网站访问跨源资源,因此它非常不安全,应该仅用于开发目的.
Gee*_*ert 52
马可补充波内利的回答是:帧/ I帧之间交互使用的目前最好的方式window.postMessage,浏览器支持
Sha*_*ani 17
检查域的Web服务器是否http://www.<domain>.com配置X-Frame-Options
它是一个旨在防止clickJacking攻击的安全功能,
从技术上讲,邪恶iframe与受害者页面的来源有关.
<html>
<iframe src='victim_domain.com'/>
<input id="username" type="text" style="display: none;/>
<input id="password" type="text" style="display: none;/>
<script>
//some JS code that click jacking the user username and input from inside the iframe...
<script/>
<html>
如果要阻止在iframe添加x-frame-options中呈现Web服务器请求
X-Frame-Options DENY
选项是:
这是IIS配置示例:
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
如果Web服务器激活了安全功能,则可能会导致客户端SecurityError.
对我来说,我想实现双向握手,这意味着:
- 父窗口加载速度比iframe快
- iframe一旦准备就应该与父窗口对话
- 父级准备好接收iframe消息并重放
此代码用于使用[CSS自定义属性]
代码iframe在iframe中设置白色标签
$(function() {
window.onload = function() {
// create listener
function receiveMessage(e) {
document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
//alert(e.data.data.header_bg);
}
window.addEventListener('message', receiveMessage);
// call parent
parent.postMessage("GetWhiteLabel","*");
}
});
亲
$(function() {
// create listener
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
// replay to child (iframe)
document.getElementById('wrapper-iframe').contentWindow.postMessage(
{
event_id: 'white_label_message',
wl: {
header_bg: $('#Header').css('background-color'),
header_text: $('#Header .HoverMenu a').css('color'),
button_bg: $('#Header .HoverMenu a').css('background-color')
}
},
'*'
);
}, false);
});
自然你可以限制起源和文本,这是易于使用的代码
我发现这个检查有用:
[使用postMessage的跨域消息]
| 归档时间： |
|
| 查看次数： |
822180 次 |
| 最近记录： |