相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。
一，跨域的几种方式：
1，JSONP
此结果返回一个js函数的调用
2，H5 的postMessage方法
高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能主要包括接受信息的”message”事件和发送消息的”postMessage”方法。
3，通过设置Access-Control-Allow-Origin来实现跨域访问。
Access-Control-Allow-Origin:* 表示允许任何域名跨域访问（最不建议使用*，同时也是最容易忽略的。）
4，代理。
5，等等这里再简单说三点...
二，OWASP(Open Application Security Project) 开放式Web应用程序安全项目
2017 OWASP Top 10十大安全漏洞候选出炉，你怎么看？
详情 请查看
http://www.owasp.org.cn/owasp-project/OWASPTop102017RC1V1.0.pdf
三，为什么要攻击?
其实真正为了玩的心态去进行黑网站的人，还是少数。多数攻击还是有利益的成分在里面的。我模糊的记得，以前听腾讯的工程师说过一句话，大概是这样的：开发者不可能确保自己的应用绝对无法被攻击，但是只要攻击我们的时候，黑客花费的成本远比他可以获取的利益大得多，黑客就不会去攻击。防范强如支付宝、QQ等产品，也都曾被报过漏洞，看来防御不是绝对的，我们只能想办法让我们的应用更加安全。
四，前端攻击都有哪些形式，我该如何防范？
1 XSS攻击
在使用浏览器进行xss测试时需要预先关闭xss过滤器
chrome的关闭方法：
我的chrome安装目录在C:\Program Files (x86)\Google\Chrome\Application\chrome.exe，关闭方法是在命令行输入以下命令：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --disable-xss-auditor
1.1 是什么？
在web前端方面，可以简单的理解为一种javascript代码注入。举个例子，我们有个社交网站，允许大家相互访问空间，网站可能是这样做的：
<?php
$username="侯医生";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
用户名：<?php echo $username;?>
</div>
</body>
</html>
但是，如果你的用户名，起名称的时候，带上script标签呢？我们知道，浏览器遇到html中的script标签的时候，会解析并执行标签中的js脚本代码，那么如果你的用户名称里面含有script标签的话，就可以执行其中的代码了。
<?php
$username="<script>alert('侯医生');</script>";
?>
1.2 如何防范？
目前来讲，最简单的办法防治办法，还是将前端输出数据都进行转义最为稳妥。比如，按照刚刚我们那个例子来说，其本质是，浏览器遇到script标签的话，则会执行其中的脚本。但是如果我们将script标签的进行转义，则浏览器便不会认为其是一个标签，但是显示的时候，还是会按照正常的方式去显示。
<?php
$username="<script>alert('侯医生');</script>";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--我们将输出的后端变量，转义之后再输出，则可以避免被注入代码-->
<div>
用户名：<?php echo htmlentities($username);?>
</div>
</body>
</html>
1.3 升级攻击
网站使用append进行dom操作，如果是append我们可以决定的字段，那么我们可以将左右尖括号，使用unicode码伪装起来，就像这样--"\u003cscript\u003ealert('okok');"。接下来转义的时候，伪装成\u003的<会被漏掉，append的时候，则会被重新调用。
<?php
$username="\u003cscript\u003ealert('okok');";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
<div>
用户名：<?php echo htmlentities($username);?>
</div>
<div>版权所有：<span id="username_info"></span></div>
<script>
$('#username_info').append("<?php echo htmlentities($username);?>");
</script>
</body>
</html>
防御再次升级
笔者建议，最好由后端获取，在前端转义后再行输出，代码如下
<script>
var value = decodeURIComponent("<?php echo htmlentities($_GET['username']);?>");
$('#username_info').append(value);
</script>
2 CSRF攻击
CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站)。
(这个张图乃是盗图，如侵权及时与笔者联系)
通常我们会为了省事儿，把一些应当提交的数据，做成get请求。殊不知，这不仅仅是违反了http的标准而已，也同样会被黑客所利用。
比如，你开发的网站中，有一个购买商品的操作。你是这么开发的：
<?php
// 从cookie中获取用户名，看似稳妥
$username = $_COOKIE['username'];
$productId = $_GET['pid'];
// 这里进行购买操作
//store_into_database($username, $productId);
?>
<meta charset="utf-8" />
<?php
echo $username . '买入商品：' . $productId;
?>
而商品ID图个省事儿，就使用了url中的get参数。买商品的话，
那么，黑客的网站可以这样开发：
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
这样的话，用户只需要访问一次黑客的网站，其实就相当于在你的网站中，操作了一次。然而用户却没有感知。
如果你使用了post请求来处理关键业务的，还是有办法可以破解的。我们的业务代码如下：
<?php
$username = $_COOKIE['username'];
// 换为post了，可以规避黑客直接的提交
$productId = $_POST['pid'];
// 这里进行购买操作
//store_into_database($username, $productId);
?>
<meta charset="utf-8" />
<?php
echo $username . '买入商品：' . $productId;
?>
黑客代码如下：
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
<button id="clickme">点我看相册</button>
<script>
$('#clickme').on('click', function () {
// 用户再不知情的情况下，提交了表单，服务器这边也会以为是用户提交过来的。
$('#myform').submit();
});
</script>
<form id="myform" style="display:none;" target="myformer" method="post" action="http://myhost:8082/lab/xsrflab/submit.php">
<input type="hidden" name="pid" value="1">
</form>
<iframe name="myformer" style="display:none;"></iframe>
</body>
</html>
点击后，用户进行了提交，却连自己都不知情。这种情况如何防御呢？
最简单的办法就是加验证码，这样除了用户，黑客的网站是获取不到用户本次session的验证码的。但是这样也会降低用户的提交体验，特别是有些经常性的操作，如果总让用户输入验证码，用户也会非常的烦。
另一种方式，就是在用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session，使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过
3 网络劫持攻击
很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。
如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。
4 控制台注入代码
不知道各位看官有没有注意到天猫官网控制台的警告信息。因为有的黑客会诱骗用户去往控制台里面粘贴东西（欺负小白用户不懂代码），比如可以在朋友圈贴个什么文章，说:"只要访问天猫，按下F12并且粘贴以下内容，则可以获得xx元礼品"之类的，那么有的用户真的会去操作，并且自己隐私被暴露了也不知道。
不过，这种攻击毕竟是少数，所以各位看官看一眼就行，如果真的发现有的用户会被这样攻击的话，记得想起天猫的这种解决方案。
百度的招聘广告连浏览器的控制台都不放过。可以看到不同的输出有不同的图标和不同的颜色，并且每条输出后面都有超级链接，点击后跳转到网页源码的相应行。简单粗暴的招聘文字中透露着文雅，搞的我都很想投一份简历过去了。不得不说，很有百度老总李彦宏的范儿！
豆瓣的招聘玩法，一般情况下，能够看到这些代码的人，要么是直接来扒代码的，要么就是来调试数据的，而豆瓣给出的更是直接，好不拐弯抹角的甩给你一句话：喜欢看豆瓣的代码，还是发现了什么bug？不如和我们一起为豆瓣添砖加瓦吧！
5 钓鱼
钓鱼也是一种非常古老的攻击方式了，其实并不太算前端攻击。可毕竟是页面级别的攻击，我们也来一起聊一聊。我相信很多人会有这样的经历，QQ群里面有人发什么兼职啦、什么自己要去国外了房子车子甩卖了，详情在我QQ空间里啦，之类的连接。打开之后发现一个QQ登录框，其实一看域名就知道不是QQ，不过做得非常像QQ登录，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登录到QQ，用户名和密码却给人发过去了。
其实这种方式，在前端也有利用。下面，我们就来试试如果利用前端进行一次逼真的钓鱼。
1 首先，我们在xx空间里分享一篇文章，然后吸引别人去点击。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
当前你在xx空间
</div>
<h1>侯博士的分享</h1>
<section>
咱们班当年班花，现在长这样：
<!--这是咱们的钓鱼网站-->
<a href="http://localhost:8082/lab/fish/cheat.php" target="_blank">点我查看</a>
</section>
</body>
</html>
接着，我们在cheat.php这个网站上面，将跳转过来的源网页地址悄悄的进行修改。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
你想看的信息：
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
<script>
// 在用户不知情的情况下，对跳转的来源网页进行地址替换
window.opener.location = 'http://localhost:8082/lab/fish/myfishsite.php';
</script>
</body>
</html>
我们平时开发要注意些什么？
开发时要提防用户产生的内容，要对用户输入的信息进行层层检测
要注意对用户的输出内容进行过滤(进行转义等)
重要的内容记得要加密传输(无论是利用https也好，自己加密也好)
get请求与post请求，要严格遵守规范，不要混用，不要将一些危险的提交使用jsonp完成。
cookie localstorage sessionstorage 慎重使用，这些数据很容易得到。
对于URL上携带的信息，要谨慎使用。
心中时刻记着，自己的网站哪里可能有危险。
