前端面试题集锦（二）

一：同源策略

源就是协议、域名和端口号

若地址里面的协议、域名和端口号均相同则属于同源。

例如，相对于http://www.a.com/test/index.html的同源检测

1>http://www.a.com/dir/page.html ------成功

2>http://www.child.a.com/test/index.html -------失败，域名不同

3>https://www.a.com/test/index.html --------失败，协议不同

4>http://www.a.com:8000/test/index.html ---------失败，端口号不同

同源策略：

　　同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，所以a.com下的脚本采用ajax读取b.com里面的文件会报错

不受同源策略限制：

页面中的链接、重定向以及表单提交是不会受到同源策略限制的

除了DOM、Cookie、XMLHttpRequest会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。不过script、img、iframe、link等标签都可以跨域加载资源，而不受同源策略的限制。

二：跨域

　　受前面同源策略的影响，不是同源的脚本是不能操作其他源下面的对象，想要操作另一个源下的对象，就要用到跨域。

跨域的实现方法：

①降域document.domin

同源策略认为域和子域属于不同的域，如：
　　child1.a.com 与 a.com，
　　child1.a.com 与 child2.a.com，
　　xxx.child1.a.com 与 child1.a.com
两两不同源，可以通过设置 document.damain='a.com'，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置documen.damain='a.com'。
此方式的特点：
　　1. 只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com。
　　2. 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
　　3. 这种方法只适用于 Cookie 和 iframe 窗口。

②JSONP跨域

原理：

　　（举例：a.com/jsonp.html想得到b.com/main.js中的数据）在a.com的jsonp.html里创建一个回调函数xxx，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。我们来看看代码：

a.com/jsonp.html中的代码：

function ScriptTag(src) {
        var script = document.createElement('script');
        script.setAttribute('type','text/javascript');
        script.src = src;
        document.body.appendChild(script)
    }

    window.onload = function(){
        ScriptTag('main.js?callback=foo');
    };

    function foo(data) {
        console.log(data.name + '你好');
    }

b.com/main.js中的代码：

foo({name:'hi'});

采用jsonp跨域存在的问题：

　　1.使用这个方法，只要是个网站都可以拿到b.com里面的数据，所以存在安全问题。需要网站双方商议基础token的身份验证

　　2.只能是get，不能是post

　　3.可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来避免此问题。

XSS攻击：

什么是xss攻击：

　　xss是一种经常出现在web应用中的计算机安全漏洞，它允许恶意的web用户将代码植入到其他用户使用的页面中。比如HTML代码和客户端脚本。攻击者可以利用xss漏洞逃避掉访问控制，例如同源策略，从而达到攻击者的目的，比如获取用户的cookie，导航到恶意网站，携带木马等等。

xss攻击类型:

　　1.非持久型xss攻击：指浏览器每次都要在参数中提交恶意数据才能触发的跨站脚本漏洞。

　　2.持久型xss攻击：指通过提交恶意数据到存储器，web应用程序输出的时候是从存储器中读出恶意数据输出到页面的一类跨站脚本漏洞。

xss攻击防御：

原则：不相信客户输入的数据

注意：攻击代码不一定在<script></script>

　　1.使用 XSS Filter

　　输入过滤，对用户提交的数据进行有效性验证，仅接受指定长度范围内并符合我们期望格式内容提交，阻止或者忽略除此之外的其他任何数据。比如过滤或移除特殊的html标签，JavaScript事件的标签。

　　2.DOM型的XSS攻击防御

　　把变量输出到页面时做好相关的编码转义工作，如果输出到<script>中，可进行JS编码；要输出到HTML内容或属性，则进行HTML编码处理，根据不同语境采用不同的编码方式。

　　3.HTTPOnly Cookie

　　将重要的cookie标记为http only,这样服务器向web服务器发起请求的时候就会带上cookie字段，但是在脚本中却不能访问这个cookie，这样就避免了xss攻击利用document.cookie获取cookie

前端面试题集锦（二）

猜你喜欢