英文 | https://blog.bitsrc.io/javascript-security-issues-and-best-practices-37e78df4dce4

翻译 | web前端开发（ID：web_qdkf)

众所周知，JavaScript是一种很是完善的编程语言。JavaScript一般能够在动态网页中找到，以提供扩展功能，例如表单提交/验证，交互性，动画，用户活动跟踪等。可是一些用户对JavaScript的安全性方面很是怀疑。

JavaScript漏洞既多是客户端问题，也多是服务器端问题。黑客经过应用程序中的各类路径可能潜在地损害你的业务。这些威胁须要以一种或另外一种方式进行评估和处理。

咱们将讨论这些常见威胁中的两个以及如何使应用程序免受威胁。

跨站点脚本（XSS）攻击

跨站点脚本是最多见的浏览器端漏洞之一。XSS自己是由客户端脚本语言（例如HTML和JavaScript）的Internet安全漏洞引发的威胁。在XSS中，攻击者可以操纵合法但易受攻击的Web应用程序执行恶意任务。

XSS攻击可能致使身份和数据盗窃。它们甚至可能致使病毒传播，有时甚至致使对用户浏览器的远程控制。

例如：

让咱们看一个简单的XSS攻击示例。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
//HTML<form><input id="query-input" type='TEXT' name="query"><button type="submit">Click me</button></form><div id="query-output"></div>//JavaScriptif (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', ready)} else { ready()}function ready() { var query = new URL(window.location).searchParams.get('query') document.getElementById('query-input').value = query document.getElementById('query-output').innerHTML = query}

你可使用Codepen在调试模式下尝试上述代码。当你插入img带有空src标签的标签时，它将触发该onerror方法。所以，若是你在其中插入脚本，它将运行。

例如，若是你输入如下内容做为文本框的输入，那么你将可以看到正在控制台中打印的cookie。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
<img src onerror =“ console.log（document.cookie）”>

如今简单地，若是将上面的代码query做为参数复制粘贴到URL中，则能够实现上面的输出。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
http：// localhost / page？query = <img src onerror =“ console.log（document.cookie）”>

所以，若是你的网站不安全，则黑客能够轻松地将一些JS代码注入你的参数中并获取用户有权访问的任何数据。此代码将容许将受害者的会话ID转移到黑客的站点，所以当黑客得到对它的访问权时，它可能会被滥用。

预防

到达时过滤输入-每当你从用户那里获得输入时，都应根据预期或有效输入尽量严格地过滤输入。
使用适当的响应标头-为了防止HTTP响应中不包含任何HTML或JavaScript的XSS，可使用Content-Type和X-Content-Type-Options标头来确保浏览器按照您指望的方式解释响应。
输出时对数据进行编码-当在HTTP响应中输出用户输入的数据时，请对输出进行编码，以防止将其识别为活动内容。
内容安全策略（CSP）-若是实施正确的CSP规则集，则能够阻止浏览器执行嵌入式 JavaScript，eval（），setTimeout（）或来自不受信任URL的任何JavaScript之类的操做。

跨站请求伪造（CSRF）攻击

CSRF或XSRF是一种攻击，黑客经过劫持会话cookie来接管或冒充受害者的身份。当目标站点仅使用cookie对请求进行身份验证，从而容许黑客窃取或劫持cookie并假冒合法用户时，这是可能的。这种攻击可能致使账户篡改，数据盗窃，欺诈等。目标包括社交媒体，浏览器内电子邮件客户端，在线银行和网络设备的Web界面以及Web应用程序。

例如：

让咱们看一个简单的例子。

假设咱们有一家银行。在咱们的网站上，典型的银行转账请求就是这样的GET请求。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
GET http://www.bank.com/transfer.php?acct=PersonB&amount=100¤cy=USD

咱们的银行使用会话Cookie对请求进行身份验证。所以，为了使用户转移资金，事件流将是：

登陆银行帐户
输入详细信息，而后单击转移

当用户登陆到银行账户时，该网站会存储一个会话cookie，该会话cookie之后将用于受权每笔交易。

行动中
当黑客进入现场时，黑客会建立一个看起来很是有用但有隐藏议程的网站。假设它是一个博客网站。当用户添加新博客帖子时，恶意应用程序将执行隐藏代码，该代码会将GET请求发送到银行网站。为了使这种黑客成功，用户应该登陆到他的银行账户-会话令牌应该就位。

这是黑客操纵GET请求的方式。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
GET http://www.bank.com/transfer.php?acct=Hacker&amount=100¤cy=USD

当用户单击“添加博客文章”时，此隐藏请求将被执行，而且在用户不知情的状况下，这笔钱将被转移到黑客的银行账户中。

以上技术也能够用于POST请求。黑客要作的就是建立一个<form>带有隐藏输入的，并向银行URL发送POST。

  
    
  
  
   
   
            
   
   
   
   
     
   
   
    
    
             
    
    
  
    
  
  
   
   
            
   
   
<body onload="document.forms[0].submit()"> <form action="http://www.bank.com/transfer.php" method="POST"> <input type="hidden" name="acct" value="Hacker"/> <input type="hidden" name="amount" value="100"/> <input type="hidden" name="currency" value="USD"/> <input type="submit" value="View my pictures!"/> </form></body>

预防

始终对会话cookie使用SameSite Cookie属性
引荐来源标头或来源必须通过验证
考虑为高度敏感的操做实施基于用户交互的保护-基于用户交互的保护包括从新认证（密码或更强），一次性令牌，CAPTCHA。若是正确实施，这些能够充当强大的CSRF防护。

JavaScript中的安全性是一个很是广阔的主题，你不可能一晚上之间学习和掌握。我强烈建议你咨询网络安全专家，以更好地了解网站的安全级别。

参考
OWASP CheatSheet
OWASP Web Goat
博客，做者Rachit Agarwal

本文分享自微信公众号 - web前端开发（web_qdkf）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。javascript

JavaScript安全性问题与最佳预防作法

跨站点脚本（XSS）攻击

例如：

预防

跨站请求伪造（CSRF）攻击

例如：

预防