javascript - 如何防止脚本注入攻击

Question

介绍

这个话题一直是 StackOverflow 和许多其他技术论坛上许多问题和答案的祸根；但是，它们中的大多数都特定于确切的条件，甚至更糟：通过脚本注入预防的“整体”安全性dev-tools-console，dev-tools-elements或者甚至address-bar据说是“不可能”保护的。这个问题是为了解决这些问题，并作为当前和历史参考作为技术改进 - 或发现新的/更好的方法来解决浏览器安全问题 - 特别是与script-injection攻击相关。

关注点

有很多方法可以“即时”提取或操纵信息；具体来说，很容易拦截从输入中收集的信息 - 以传输到服务器 - 无论 SSL/TLS 是什么。

拦截示例

看看这里不管它多么“粗糙”，人们可以很容易地使用制作模板的原理，只需复制+粘贴到eval()浏览器控制台中即可执行各种令人讨厌的事情，例如：

console.log()通过XHR在传输中截获的信息
操作POST数据，更改用户引用，例如UUIDs
通过检查 JS 代码将目标服务器替代GET（和发布）请求信息提供给中继（或获取）信息，cookies以及headers

这种攻击在未经训练的人看来“似乎”微不足道，但当涉及到高度动态的界面时，这很快就会变成一场噩梦——等待被利用。

我们都知道“你不能信任前端”，服务器应该负责安全；但是 - 我们心爱的访客的隐私/安全呢？许多人在 JavaScript 中创建“一些快速应用程序”并且不知道（或关心）后端安全性。

保护前端和后端的安全将证明对普通攻击者来说是强大的，并且还减轻了服务器负载（在许多情况下）。

努力

谷歌和 Facebook 都实施了一些缓解这些问题的方法，而且它们奏效了；所以这不是“不可能的”，但是，它们非常特定于各自的平台，并且实现需要使用整个框架以及大量工作 - 仅涵盖基础知识。

不管这些保护机制中的一些看起来多么“丑陋”；目标是在一定程度上帮助（减轻/预防）安全问题，使攻击者难以应对。众所周知：“你无法阻止黑客，你只能阻止他们的努力”。

工具和要求

目标是拥有一组简单的工具（功能）：

这些必须是普通的（香草）javascript
它们一起不应超过几行代码（最多 200 行）
他们必须是immutable，防止攻击者“重新捕获”
这些不得与任何（流行的）JS 框架发生冲突，例如 React、Angular 等
不一定要“漂亮”，但至少可读，“单行”欢迎
跨浏览器兼容，至少达到很好的百分位数

score 3 · Accepted Answer

运行时反射/内省

这是解决其中一些问题的一种方法，我并不认为这是“最好的”方法（根本），这是一种尝试。如果可以拦截一些“可利用的”函数和方法并查看“调用”（每次调用）是否来自产生它的服务器，那么这可能很有用，因为我们可以看到调用是否来自“来自稀薄的空气”（开发工具）。

如果要采用这种方法，那么首先我们需要一个函数来获取call-stack并丢弃不是FUBU的函数（由我们自己）。如果这个函数的结果是空的，hazaa！- 我们没有打电话，我们可以进行相应的处理。

一两个字

为了使其尽可能简短和简单，以下代码示例遵循 DRYKIS原则，它们是：

不要重复自己，保持简单
“少代码”欢迎高手
“太多的代码和注释”吓跑了所有人
如果你能读懂代码 - 继续让它漂亮

话虽如此，请原谅我的“速记”，解释将随之而来

首先我们需要一些常量和我们的 stack-getter

    const MAIN = window;
    const VOID = (function(){}()); // paranoid
    const HOST = `https://${location.host}`; // if not `https` then ... ?

    const stak = function(x,a, e,s,r,h,o)
    {
        a=(a||''); e=(new Error('.')); s=e.stack.split('\n'); s.shift();  r=[]; h=HOSTPURL; o=['_fake_']; s.forEach((i)=>
        {
            if(i.indexOf(h)<0){return}; let p,c,f,l,q; q=1; p=i.trim().split(h); c=p[0].split('@').join('').split('at ').join('').trim();
            c=c.split(' ')[0];if(!c){c='anon'}; o.forEach((y)=>{if(((c.indexOf(y)==0)||(c.indexOf('.'+y)>0))&&(a.indexOf(y)<0)){q=0}}); if(!q){return};
            p=p[1].split(' '); f=p[0]; if(f.indexOf(':')>0){p=f.split(':'); f=p[0]}else{p=p.pop().split(':')}; if(f=='/'){return};
            l=p[1]; r[r.length]=([c,f,l]).join(' ');
        });
        if(!isNaN(x*1)){return r[x]}; return r;
    };

在畏缩之后，请记住这是“即时”编写的“概念证明”，但经过测试并且可以正常工作。随心所欲地编辑。

stak()- 简短的解释

唯一的 2 个相关论点是第 2 个，其余的是因为 .. 懒惰（简短回答）
两个参数都是可选的
如果第一个参数x是一个数字，那么例如stack(0)返回日志中的第一项，或者undefined
如果第二个 arga是string- 或 anarray那么 egstack(undefined, "anonymous") 允许“匿名”，即使它在o
其余代码只是快速解析堆栈，这应该适用于基于 webkit 和 gecko 的浏览器（chrome 和 firefox）
结果是一个字符串数组，每个字符串是一个由单个空格分隔的日志条目function file line
如果在日志条目中找不到域名（解析前文件名的一部分），那么它不会出现在结果中
默认情况下，它会忽略文件名/（完全正确），因此如果您测试此代码，放入单独的.js文件将产生比index.html（通常）更好的结果 - 或使用任何 web-root 机制
现在不用担心_fake_，它在下面的jack函数中

现在我们需要一些工具

bore()- 通过字符串引用获取/设置/撕裂对象的某些值

const bore = function(o,k,v)
{
    if(((typeof k)!='string')||(k.trim().length<1)){return}; // invalid
    if(v===VOID){return (new Function("a",`return a.${k}`))(o)}; // get
    if(v===null){(new Function("a",`delete a.${k}`))(o); return true}; // rip
    (new Function("a","z",`a.${k}=z`))(o,v); return true; // set
};

bake()- 强化现有对象属性（或定义新属性）的速记

const bake = function(o,k,v)
{
    if(!o||!o.hasOwnProperty){return}; if(v==VOID){v=o[k]};
    let c={enumerable:false,configurable:false,writable:false,value:v};
    let r=true; try{Object.defineProperty(o,k,c);}catch(e){r=false};
    return r;
};

烘烤和钻孔 - 概要

这些都是不言自明的，所以，一些简单的例子就足够了

用于bore获取属性：console.log(bore(window,"XMLHttpRequest.prototype.open"))
用于bore设置属性：bore(window,"XMLHttpRequest.prototype.open",function(){return "foo"})
用于撕裂bore（不小心破坏）：bore(window,"XMLHttpRequest.prototype.open",null)
用于硬化bake现有属性：bake(XMLHttpRequest.prototype,'open')
用于定义bake新的（硬）属性：bake(XMLHttpRequest.prototype,'bark',function(){return "woof!"})

拦截功能和结构

现在我们可以利用上述所有优势，因为我们设计了一个简单而有效的拦截器，绝不是“完美的”，但它应该就足够了；解释如下：

const jack = function(k,v)
{
    if(((typeof k)!='string')||!k.trim()){return}; // invalid reference
    if(!!v&&((typeof v)!='function')){return}; // invalid callback func
    if(!v){return this[k]}; // return existing definition, or undefined
    if(k in this){this[k].list[(this[k].list.length)]=v; return}; //add
    let h,n; h=k.split('.'); n=h.pop(); h=h.join('.'); // name & holder
    this[k]={func:bore(MAIN,k),list:[v]}; // define new callback object

    bore(MAIN,k,null); let f={[`_fake_${k}`]:function()
    {
        let r,j,a,z,q; j='_fake_'; r=stak(0,j); r=(r||'').split(' ')[0];
        if(!r.startsWith(j)&&(r.indexOf(`.${j}`)<0)){fail(`:(`);return};
        r=jack((r.split(j).pop())); a=([].slice.call(arguments));
        for(let p in r.list)
        {
            if(!r.list.hasOwnProperty(p)||q){continue}; let i,x;
            i=r.list[p].toString(); x=(new Function("y",`return {[y]:${i}}[y];`))(j);
            q=x.apply(r,a); if(q==VOID){return}; if(!Array.isArray(q)){q=[q]};
            z=r.func.apply(this,q);
        };
        return z;
    }}[`_fake_${k}`];

    bake(f,'name',`_fake_${k}`); bake((h?bore(MAIN,h):MAIN),n,f);
    try{bore(MAIN,k).prototype=Object.create(this[k].func.prototype)}
    catch(e){};
}.bind({});

jack()- 解释

它需要 2 个参数，第一个作为字符串（用于bore），第二个用作拦截器（函数）
前几条评论解释了一点..“添加”行只是将另一个拦截器添加到同一个引用
jack废弃一个现有的函数，把它藏起来，然后使用“拦截器函数”来重放参数
拦截器可以返回undefined或返回值，如果没有返回任何值，则不调用原始函数
拦截器返回的第一个值用作调用原始值的参数，并返回调用者/调用者的结果
这fail(":(")是故意的；如果您没有该功能，则会引发错误 - 仅当jack()失败时。

例子

让我们防止eval在控制台或地址栏中使用

jack("eval",function(a){if(stak(0)){return a}; alert("having fun?")});

可扩展性

如果您想要一种DRY-er方式与进行交互jack，则以下内容已经过测试并且效果很好：

const hijack = function(l,f)
{
    if(Array.isArray(l)){l.forEach((i)=>{jack(i,f)});return};
};

现在您可以批量拦截，如下所示：

hijack(['eval','XMLHttpRequest.prototype.open'],function()
{if(stak(0)){return ([].slice.call(arguments))}; alert("gotcha!")});

然后，聪明的攻击者可能会使用Elements (dev-tool) 来修改某些元素的属性，给它一些onclick事件，然后我们的拦截器将无法捕获；但是，我们可以使用突变观察器并使用该间谍来监视“属性更改”。在属性更改（或新节点）时，我们可以通过我们的检查来检查更改是否进行了FUBU（或没有）stak()：

const watchDog=(new MutationObserver(function(l)
{
   if(!stak(0)){alert("you again! :D");return};
}));

watchDog.observe(document.documentElement,{childList:true,subtree:true,attributes:true});

结论

这些只是处理坏问题的几种方法。尽管我希望有人觉得这很有用，请随时编辑此答案，或发布更多（或替代/更好）提高前端安全性的方法。