Javascript 安全错误答案

【问题标题】：Javascript security errorJavascript 安全错误
【发布时间】：2017-08-23 10:42:49
【问题描述】：

所以我用 node.js (watch-http-server) 创建了一个本地网络服务器。当我在下面运行时，它在堆栈的 sn-p 中完美运行。但是，当我在本地网络上运行它时，问题就来了

SecurityError: Permission denied to access property "href" on cross-origin object

$(function(){
	alert('load');
});

body, html{
	padding: 0;
	margin: 0;
	cursor: default;
	overflow: hidden;
	background: url("../res/background.png") no-repeat;
	background-size: cover;
}
.stream-container{
	position: fixed;
	margin: 0;
	padding: 0;

	top: 2%;
	left: 5%;
}
.chat-container{
	position: fixed;
	margin: 0;
	padding: 0;
	
	top: 33%;
	left: 5%;
}

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title> Twitch Bot </title>
<meta name="author" content="Author">

	<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <div class="stream-container">
	   <iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>
   </div>
   <div class="chat-container">
        <iframe frameborder="0" scrolling="no" id="chat_embed" src="https://www.twitch.tv/lovenpk/chat?darkpopout" height="300px" width="300px"></iframe>
    </div>
   	

    <!-- Javascripts below -->
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>   
    <script type="text/javascript" scr="../js/index.js"></script>
</body>

</html>

有什么想法吗？

【问题讨论】：

标签： javascript jquery node.js html

【解决方案1】：

cross-origin security policy 被违反了。

问题在于您对iframe的使用：

<iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>

来自MDN：

错误：访问属性“x”的权限被拒绝

试图访问您没有的对象允许。这可能是从不同的加载的元素您违反了同源政策的域。

由于您的localhost 是由与player.twitch.tv 位于不同域的服务器提供的，因此您被禁止访问该服务器上的信息。这是网络内置的浏览器内限制。

此外，您的本地 Web 应用程序还需要在与服务 player.twitch.tv 的服务器相同的端口上运行。

【讨论】：

【解决方案2】：

来自MDN cross-origin security policy：

Here are some examples of resources which may be embedded cross-origin: Anything with <frame> and <iframe>. A site can use the X-Frame-Options header to prevent this form of cross-origin interaction.

我尝试在我的电脑上使用 nodejs 服务器监听 localhost:5555 进行测试，没有 SecurityError。

【讨论】：