精华内容
下载资源
问答
  • 网站同源策略

    2017-09-25 11:32:00
    所谓"同源"指的是"三个相同":协议,域名,端口。 举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。 它的同源情况如下。 ...

    所谓"同源"指的是"三个相同":协议,域名,端口。

    举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。

    它的同源情况如下。

    • http://www.example.com/dir2/other.html:同源
    • http://example.com/dir/other.html:不同源(域名不同)
    • http://v2.www.example.com/dir/other.html:不同源(域名不同)
    • http://www.example.com:81/dir/other.html:不同源(端口不同)

    同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

    随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

    (1) Cookie、LocalStorage 和 IndexDB 无法读取。

    (2) DOM 无法获得。

    (3) AJAX 请求不能发送。

    虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。那么如何规避上面三种限制:

    1.cookie

    Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。但是,两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。

    举例来说,A网页是http://w1.example.com/a.html,B网页是http://w2.example.com/b.html,那么只要设置相同的document.domain,两个网页就可以共享Cookie。

    这种方法只适用于 Cookie 和 iframe 窗口,LocalStorage 和 IndexDB 无法通过这种方法,规避同源政策,而要使用下文介绍的PostMessage API。

    另外,服务器也可以在设置Cookie的时候,指定Cookie的所属域名为一级域名,比如.example.com

    Set-Cookie: key=value; domain=.example.com; path=/

    这样的话,二级域名和三级域名不用做任何设置,都可以读取这个Cookie。

    2.iframe

    如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。

    比如,父窗口运行下面的命令,如果iframe窗口不是同源,就会报错。

    document.getElementById("myIFrame").contentWindow.document

    上面命令中,父窗口想获取子窗口的DOM,因为跨源导致报错。

    反之亦然,子窗口获取主窗口的DOM也会报错。

    如果两个窗口一级域名相同,只是二级域名不同,那么设置上一节介绍的document.domain属性,就可以规避同源政策,拿到DOM。

    对于完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题。

    • 片段识别符(fragment identifier)
    • window.name
    • 跨文档通信API(Cross-document messaging)

    2.1片段识别符

    片段标识符(fragment identifier)指的是,URL的#号后面的部分,比如http://example.com/x.html#fragment#fragment。如果只是改变片段标识符,页面不会重新刷新。

    父窗口可以把信息,写入子窗口的片段标识符。

    var src = originURL + '#' + data; document.getElementById('myIFrame').src = src;
    子窗口通过监听hashchange事件得到通知。
    window.onhashchange = checkMessage;
    
    function checkMessage() { var message = window.location.hash;  // ... }

    同样的,子窗口也可以改变父窗口的片段标识符。
    parent.location.href= target + "#" + hash;

    2.2document.name

    浏览器窗口有window.name属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。

    父窗口先打开一个子窗口,载入一个不同源的网页,该网页将信息写入window.name属性。

    window.name = data;

    接着,子窗口跳回一个与主窗口同域的网址。

    location = 'http://parent.url.com/xxx.html';

    然后,主窗口就可以读取子窗口的window.name了。

    var data = document.getElementById('myFrame').contentWindow.name;

    这种方法的优点是,window.name容量很大,可以放置非常长的字符串;缺点是必须监听子窗口window.name属性的变化,影响网页性能。

    2.3window.postMessage

    上面两种方法都属于破解,HTML5为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。

    这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。

    举例来说,父窗口http://aaa.com向子窗口http://bbb.com发消息,调用postMessage方法就可以了。

    var popup = window.open('http://bbb.com', 'title'); popup.postMessage('Hello World!', 'http://bbb.com');

    postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。

    子窗口向父窗口发送消息的写法类似。

    window.opener.postMessage('Nice to see you', 'http://aaa.com');

    父窗口和子窗口都可以通过message事件,监听对方的消息。

    window.addEventListener('message', function(e) { console.log(e.data); },false);

    message事件的事件对象event,提供以下三个属性。

    • event.source:发送消息的窗口
    • event.origin: 消息发向的网址
    • event.data: 消息内容

    下面的例子是,子窗口通过event.source属性引用父窗口,然后发送消息。

    window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); }

    event.origin属性可以过滤不是发给本窗口的消息。

    window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== 'http://aaa.com') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } }

    2.4 LocalStorage

    通过window.postMessage,读写其他窗口的 LocalStorage 也成为了可能。

    下面是一个例子,主窗口写入iframe子窗口的localStorage

    
    window.onmessage = function(e) { if (e.origin !== 'http://bbb.com') { return; } var payload = JSON.parse(e.data); localStorage.setItem(payload.key, JSON.stringify(payload.data)); }; 

    上面代码中,子窗口将父窗口发来的消息,写入自己的LocalStorage。

    父窗口发送消息的代码如下。

    
    var win = document.getElementsByTagName('iframe')[0].contentWindow; var obj = { name: 'Jack' }; win.postMessage(JSON.stringify({key: 'storage', data: obj}), 'http://bbb.com'); 

    加强版的子窗口接收消息的代码如下。

    
    window.onmessage = function(e) { if (e.origin !== 'http://bbb.com') return; var payload = JSON.parse(e.data); switch (payload.method) { case 'set': localStorage.setItem(payload.key, JSON.stringify(payload.data)); break; case 'get': var parent = window.parent; var data = localStorage.getItem(payload.key); parent.postMessage(data, 'http://aaa.com'); break; case 'remove': localStorage.removeItem(payload.key); break; } }; 

    加强版的父窗口发送消息代码如下。

    
    var win = document.getElementsByTagName('iframe')[0].contentWindow; var obj = { name: 'Jack' }; // 存入对象 win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com'); // 读取对象 win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*"); window.onmessage = function(e) { if (e.origin != 'http://aaa.com') return;  // "Jack" console.log(JSON.parse(e.data).name); }; 

    3、AJAX

    同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

    除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

    • JSONP
    • WebSocket
    • CORS

    3.1 JSONP

    JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

    它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

    首先,网页动态插入<script>元素,由它向跨源网址发出请求。

    
    function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://example.com/ip?callback=foo'); } function foo(data) { console.log('Your public IP address is: ' + data.ip); }; 

    上面代码通过动态添加<script>元素,向服务器example.com发出请求。注意,该请求的查询字符串有一个callback参数,用来指定回调函数的名字,这对于JSONP是必需的。

    服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。

    
    foo({
      "ip": "8.8.8.8" }); 

    由于<script>元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

    3.2 WebSocket

    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

    下面是一个例子,浏览器发出的WebSocket请求的头信息(摘自维基百科)。

    
    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com 

    上面代码中,有一个字段是Origin,表示该请求的请求源(origin),即发自哪个域名。

    正是因为有了Origin这个字段,所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信。如果该域名在白名单内,服务器就会做出如下回应。

    
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat
    

    3.3 CORS

    CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。

     



     

    转载于:https://www.cnblogs.com/darkdaidai/p/7591098.html

    展开全文
  • 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。 示例: URL: http://store.company.com/dir/page.html URL 结果 原因 ...同源 ...同源 ...

    同源

    “同源"指的是"三个相同”

    • 协议相同
    • 域名相同
    • 端口相同

    举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)

    示例:
    URL: http://store.company.com/dir/page.html

    URL结果原因
    http://store.company.com/dir2/other.html同源只有路径不同
    http://store.company.com/dir/inner/another.html同源只有路径不同
    https://store.company.com/secure.html失败协议不同
    http://store.company.com:81/dir/etc.html失败端口不同 ( http:// 默认端口是80)
    http://news.company.com/dir/other.html失败主机不同

    不同源的限制

    1. Cookie、LocalStorage 和 IndexDB 无法读取。
    2. DOM 无法获得。
    3. AJAX 请求不能发送。

    参考
    https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

    http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

    https://www.jianshu.com/p/a0dd1e712c3a

    展开全文
  • 参考文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 原理基于postMessage。 demo例子: parent.html <!DOCTYPE html> <html> <...button oncl

    参考文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

    原理基于postMessage。

    demo例子:

    parent.html

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <h1>父亲页面</h1>
            <button onclick="sendMeg()">发送数据</button>
            <iframe src="children.html" width="100%" height="200px" id="child"></iframe>
        </body>
        <script>
            function sendMeg(){
                var iframe = document.getElementById("child")
                iframe.contentWindow.postMessage('父页面传送的数据','*');
            }
            function callback(){
                console.log(回调)
            }
            // 监听传送到父页面的数据
            window.addEventListener('message',function(data){
                console.log(data)
            })
        
        </script>
    </html>

    children.html

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <h1>嵌套页面</h1>
            <button onclick="sendMesg()">发送信息</button>
            <script>
                // 监听 传入的
                window.addEventListener("message",function(obj){
                console.log('子页面')
                console.log(obj)
                let parentWindow = obj.source
                parentWindow.postMessage('子页面传送的数据','*')
                
    });
    function sendMesg(){
        window.parent.window.postMessage('子页面传送的数据','*')
    }
            </script>
        </body>
    </html>

     

    展开全文
  • 尝试描述下想要实现的功能, 假如你登录上了一个网站, 首页有几个超链接, 其中大部分都是同源网址, 但是有一个网址是并非同源, 也就是ip地址和域名不一样, 但是这个超链接网址里面的东西实际上是这个网站的东西,而且...
  • 同源策略引言正文一、同源策略的定义 引言 作为前端开发人员,你要是连同源策略都不知道是什么,那就太说不过去了。本篇文章将讲述同源策略的定义, 以及当我们需要克服同源策略,如何进行跨域访问数据的方法。 正文...

    引言

    作为前端开发人员,你要是连同源策略都不知道是什么,那就太说不过去了。本篇文章将讲述同源策略的定义, 以及当我们需要克服同源策略,如何进行跨域访问数据的方法。

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    正文

    一、同源策略的定义

    同源策略: 浏览器自带的一种安全策略,他是指协议域名端口 三个都相同的才能互相访问,即若协议、域名、端口有一个不相同时,浏览器禁止页面加载或执行与自身不同域的脚本。

    那既然有同源的概念,那必定有不同源的概念,接下来我们来看一个组例子, 理解一下什么是同源,什么是不同源。

    url是否同源(以及原因)
    http://www.example.com:80该 url 与下列的 url 比较
    http://www.example.com:80/index.html同源(协议、域名、端口都相同)
    http://www.example.com:5000不同源(端口不同
    https://www.example.com:80不同源(协议不同
    http://www.each.com:80不同源(域名不同

    为什么浏览器会有同源策略? 因为如果没有同源策略,别人就可以轻松的获取我们网站的 cookie 信息, 或是对网页进行DOM操作, 要知道这都是非常恐怖的, 尤其是 cookie 信息, 它里面存在着 sessionID ,这是与服务端的 session 会话的重要凭证, 要是被别人得到了 cookie , 可能会造成数据被盗取等后果。

    二、同源策略的应用

    上面了解了同源策略的定义,但是那还是挺抽象的,那我们接下来来看一下实战中的同源策略是什么样的,借此来更深刻的理解一下同源策略的定义。

    我们的主体网址是: http://localhost:5000/

    • 请求与自身同域的脚本文件

    我们通过jquery的 ajax 来请求 http://localhost:5000/ 下的 data.js 脚本文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        
    	$.ajax({
    	    url: 'http://localhost:5000/data.js',
    	    type: 'get'
    	})
    	.done(data => {
    	    console.log(data)
    	})
        
    </script>
    
    </body>
    </html>
    

    因为 http://localhost:5000/data.jshttp://localhost:5000/ 是同源的,所以成功请求到了 data.js 脚本文件中的数据, 浏览器也没有报错。

    • 请求与自身不同域的脚本文件

    我们通过jquery的 ajax 来请求 http://www.example.com:5000/ 下的 data.js 脚本文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        
    	$.ajax({
    	    url: 'http://www.example.com:5000/data.js',
    	    type: 'get'
    	})
    	.done(data => {
    	    console.log(data)
    	})
        
    </script>
    
    </body>
    </html>
    

    因为 http://www.example:5000/data.jshttp://localhost:5000/ 是不同源的,所以浏览器会报出以下错误:
    在这里插入图片描述
    这个错误大致的意思就是说因为浏览器的同源策略,无法通过该域的网址去访问别的域下的脚本文件, 这就是浏览器同源策略起到的作用。

    想必大家已经对同源策略有了一定的了解了。那么如果我们有时真的要去访问别的域下的脚本文件,但因为浏览器存在同源策略,那我们该怎么办呢?继续往下看, 看看如何解决这一问题。

    三、实现不同域的脚本文件访问

    实现不同域的脚本文件访问的方法有很多种,以下举几个例子:

    1. 通过html几个特殊的标签进行访问
    2. 通过jsonp来实现跨域请求
    3. 通过CORS(跨域资源共享)实现跨域请求
    4. 通过代理实现跨域请求(例如nginx 、node中间件)

    (1)通过html几个特殊的标签进行访问

    其实在 html 里有几个标签是存在 src 属性的,例如 <script><link>img<iframe>。 这些标签的 src 属性是不会受到浏览器的同源策略的限制,是可以对不同域下的脚本文件进行访问的。举个例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    </body>
    </html>
    

    我们应该都知道 jquery 可以用外部链接引入吧,这就是通过 src 属性,避开了同源策略的限制的一个典型例子。

    (2)通过jsonp来实现跨域请求

    看到 jsonp 就能猜到,这个方法是在需要跨域请求数据时用到的,接下来我们直接来看如何使用。

    • 原生实现jsonp跨域请求
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    //在script标签的src属性后面,拼接上一个 callback=回调函数名
    <script src="http://www.example.com:5000/data.js?callback=showDate"></script>
    <script>
    	//会在跨域请求后,调用该函数
        function showDate(data) {
            console.log(data)
        }
    </script>
    </body>
    </html>
    
    • jquery 实现 jsonp跨域请求

    实际上jquery 将jsonp封装在 ajax请求中,原理的话其实就是创建了一个script标签,然后拼接 url 字符串,作为 src 属性的值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $(function () {
            function showDate(data) {
                console.log(data)
            }
            $.ajax({
                url: 'http://www.example.com:5000/data.js',
                type: 'get',          //请求方式必须为 get
                dataType: 'jsonp',    //数据类型改为 jsonp
                jsonpCallback: 'showDate'   //数据返回后调用的回调函数
            })
            .done(data => {
                console.log(data)
            })
        })
    </script>
    
    </body>
    </html>
    

    这样就实现了跟原生一样的通过 jsonp 实现跨域请求的效果。

    (3)通过CORS(跨域资源共享)实现跨域请求

    CORS 这个缩写是不是特别看着特别眼熟?没错,在上面我们做了一个跨域请求报错的实例,图中的报错信息就有这个缩写单词在内, 所以通过CORS(跨域资源共享)也是可以实现跨域请求。 因为这个我研究的不太深,我就简单来说一下怎么用吧。

    我们需要向 http://www.example.com:5000/ 请求它下面的 data.js 脚本文件, 我们就只需要服务端给相应头设置一下属性即可,即可完成无论谁跨域请求该域下的 data.js , 都不会因为同源策略而报错, 所以其实这个也有点不太好, 谁都可以访问,那岂不是很危险。

    Access-Control-Allow-Origin:*
    Access-Control-Allow-Methods:POST,GET,OPTIONS
    Access-Control-Allow-Headers:Origin,x-requested-with,content-type,Accept
    

    这个方法我描述的比较模糊, 因为我也没有深入研究过,所以可能会有点错误,但这确实是一种跨域请求的方法,如果有感兴趣的小伙伴可以去看一下阮一峰老师的一个讲解CORS的日志——跨域资源共享 CORS 详解 - 阮一峰的网络日志

    (4)通过代理实现跨域请求

    我们都知道同源策略是浏览器自带的,那么我们如果要避免同源策略进行跨域请求,我们可以通过代理服务器的方式进行请求,例如我们请求一个与自身不同域的脚本文件,那么我们可以先请求与自身同域的一个 url ,然后通过代理服务器进行跳转, 最后返回由代理服务器请求到的脚本文件,这样说比较抽象,我们用一个node的中间件来举例说一下(其实nginx也可以):

    //引入 express 框架
    const express = require('express');
    //引入 代理中间件
    const { createProxyMiddleware } = require('http-proxy-middleware');
    //创建服务实例
    const app = express();
    
    // 使用一下代理中间件,第一个参数为我们需要代理的 url
    //                   第二个参数为跳转的 url
    app.use('/api', createProxyMiddleware({ target: 'http://www.example.com:5000', changeOrigin: true }));
    
    //监听5000端口
    app.listen(5000);
    

    按照以上配置完以后, 我们请求 http://localhost:5000/api/data.js 时, 代理服务器就会自动跳转到 http://www.example.com:5000/data.js , 这样的话我们就完成跨域请求, 并且浏览器也不会报错。

    如果想具体学习一下的小伙伴可以去 github 上看一下这个中间件作者的详细介绍,下面附上跳转的链接——http-proxy-middleware的GitHub地址

    其实 nginx也可以完成代理的作用,这里就不多做解释了,如果想要了解的可以去查询一下文档,自行学习一下。

    结束语

    好了,关于同源策略也介绍的差不多了, 有些写的详细,有些写的简略,那也是作者的水平的体现了, 等我以后水平高了,会继续完善该文章的。希望本篇文章对大家能有所帮助, 若有哪里写的不对, 也欢迎大家评论指正,谢谢~

    展开全文
  • 而非同源网站跳转,会有三条限制: 1.Cookie,localStorage(本地缓存)等信息无法被读取(保证了B网站无法拿到用户在A网站的登入信息) 2.DOM无法获得 3.AJAX请求不能发起 为什么要有这三条限制? 让我们设想这样...
  • 1. 什么是同源策略   理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。  何谓同源:  URL由协议、域名、... 比如一个恶意网站的页面通过iframe嵌入了银行的登录页
  • 同源页面间通信,storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信,storage事件监听 参考博客:h5 storage事件监听 介绍 当同源页面的某个页面修改了...
  • 2个同源tab页之间的数据交互

    千次阅读 2020-02-20 16:01:27
    如果要实现2个同源tab页之间的数据交互,可以选择使用localStorage,因为它的存储遵循同源策略。通过约定localStorage某一个itemName,基于该key值的内容进行通信。 H5提供了storage事件,通过window对象监听storage...
  • **同源策略**是指在[Web浏览器](https://zh.wikipedia.org/wiki/排版引擎)中,允许某个网页[脚本](https://zh.wikipedia.org/wiki/腳本)访问另一个网页的数据,但前提是这两个网页必须有相同的[URI]...
  • 同源限制

    2020-06-15 12:44:51
    什么是同源 如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。 http://www.example.com/dir/page.html http://www.example.com/dir2/other.html:同源 ...
  • 如何理解web安全——同源策略

    千次阅读 2018-04-27 17:29:10
    什么是同源策略? 浏览器同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行狡猾。 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。只有同一个源...
  • JSONP实现跨域(非同源策略请求)

    千次阅读 2021-03-12 10:15:19
    web服务器用来给存储静态资源,即展示给用户的页面,而data服务器则会负责网站的业务逻辑和数据分析等工作,这两个服务器往往会有不同的域名或者端口,那么如何将后端业务逻辑和数据请求到前端页面中呢?这时候就...
  • 前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前后端分离。 但是在开发过程中遇见了同源策略的跨域问题,页面能够显示,但是却没有数据...
  • js同源策略

    千次阅读 2019-03-14 17:18:46
    浏览器安全的基石是“同源政策”(same-origin policy)“,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A 网页设置的 Cookie,B 网页不能打开,除非这两个网页...
  • js同源

    2018-08-03 01:26:31
    同源策略 同源是js对能操作那些web内容的一条完整的安全限制。当web页面打开其他浏览器窗口,或者使用iframe的时候,会发挥作用。 即,脚本只能读取和所属文档来源相同的窗口和文档的属性。 文档的来源包含协议,...
  • 以下的讨论是以同源为前提。(同源和同站是有区别的,同源要求更为严格) 不是所有的sessionStorage都能共享。 1. 第一种情况 浏览器中打开A页面,再通过A页面打开新的标签页B页面,此时A、B两个页面的sessionStorage...
  • 我们发现,在现代网站中(京东)一个公司可能具有很多的域名,也都不是同源地址,如果在公司内部都不能进行数据请求,是很不方便的。 URL网址的基本概念 URL概念:统一资源定位符 (Uniform Resource Locator) ...
  • 协议、域名以及端口号相同就为同源,是由Netscape提出的一个著名的安全策略。 策略主要限制js的能力 1.无法读取非同源的 cookie、Storage、indexDB的内容 2.无法读取非同源的DOM 3.无法发送非同源的AJAX,更加...
  • 浏览器的同源策略

    2020-11-17 18:53:25
    同源策略 什么是同源简介 ​ 同源既是协议、域名、和端口三者相同,下面相对http://store.company.com/dir/page.html同源检测的示例。 ​ 浏览器中的大部分内容都是受同源策略限制的,但是以下三个标签可以不受...
  • 同源策略和跨域

    2021-03-05 16:01:17
    目录:一、同源策略1、什么是同源?2、什么是同源策略?二、跨域1、什么是跨域?2、跨域的目的?3、拦截跨域请求三、实现跨域请求1、JSONP跨域(1)简介(2)实现原理(1)原生js实现jsonp分析:源码:缺点:注意:...
  • 同源限制及解决方案

    2020-12-08 10:11:13
    这里写自定义目录标题什么是同源?新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • 浏览器同源策略

    2020-01-05 21:07:29
    2 withCredentials 属性 3、非简单请求 3.1、预检请求 3.2 预检请求的回应 3.3 浏览器的正常请求和回应 4、与JSONP的比较 四、服务器端实现CORS跨域 1、springboot 浏览器安全基于 同源政策,不同源网站无法获取对方...
  • 同源策略是web安全策略中的一种,也是非常重要的一种,同源策略明确规定了不同域的客户端在没有被明确的授权的情况下,不能读写对方的资源。、 二 同源分析 同源是指请求的URI(统一资源标识符),网络协议,主机名...
  • 将贝叶斯混合模型应用于蛋白质远程同源性检测的比对数据。
  • 同源策略 同源策略由Netscape提出的一个著名的安全策略。 现在所有可以支持JavaScript的浏览器都会使用这一策略。 同源 同源即 同协议,端口,域名 同源策略的限制 不能获取不同源的cookie,LocalStorage 和 ...
  • 浏览器同源策略和跨域的实现方法

    千次阅读 多人点赞 2018-10-03 15:52:11
    同源策略(Same Origin Policy,SOP)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的...
  • JavaScript的同源策略详解

    千次阅读 2018-09-05 19:19:18
    JavaScript的同源策略详解 JavaScript的同源策略详解 一、概念: 二、为什么要有同源限制? 三、限制范围 四、规避方法 1、Cookie 2、iframe 2.1 片段识别符 2.2 window.name 2.3 window.postMessage 2.4 ...
  • 关于同源策略

    2021-01-31 22:48:35
    恩,你现在打开了浏览器,在一 个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息的JavaScript,当你访问 这个恶意网站并且执行它JavaScript
  • 本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略。...比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,018
精华内容 8,807
关键字:

同源网站