前端安全学习-跨域和CSRF

最新推荐文章于 2024-08-01 15:35:18 发布

原创最新推荐文章于 2024-08-01 15:35:18 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#安全

前端安全专栏收录该内容

12 篇文章

订阅专栏

本文深入解析跨域问题的本质，即请求虽成功但结果被浏览器拦截。详述五种跨域处理方法：JSONP仅支持GET请求；CORS需服务端配置且IE10以上支持；window.postMessage适用于主页面与iframe间数据传递；WebSocket实现实时双向通信；及通过代理服务器解决跨域问题。文章还提供了前端开发中利用Node搭建服务器作为中间层的技巧。

重点

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被客户端(浏览器)拦截了。

跨域方法

JSONP

只能GET，js创建script

CORS

IE10以上支持，需要服务端配置

window.postMessage

HTML5方法，应用于主页面和iframe之间的数据传递

//页面向子页面传递：
//主页面
<iframe id="ifm" src="http://localhost:8080/" width="800" height="500"></iframe>
<script>
document.getElementById('ifm').onload = e=>{
	e.target.contentWindow.postMessage({info:'这是来自主页面的信息'},'*')
}
</script>
//子页面
<script>
window.onmessage = (event) => {
    console.log(event)
}
</script>

//子页面向主页面传递
//主页面
<iframe id="ifm" src="http://localhost:8080/" width="800" height="500"></iframe>
<script>
window.onmessage = (event) => {
    console.log(event)
}
</script>
//子页面
<script>
top.postMessage({info:'这是来自子页面的信息'},'*')
</script>
//子页面