使用Protractor测试HTTP标头：(X-)Content-Security-Policy

Question

有没有办法用Protractor测试随HTML主页一起发送的HTTP标头？具体地说，我想测试以确保存在与安全相关的(X-)Content-Security-Policy头：

Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; font-src 'self';

理想情况下，我希望能够测试它的效果，而不仅仅是它的存在，因为这样可以更好地确保页面按照我想要的方式运行。

Answer 1

下面的代码似乎(至少部分地)测试(在Chrome中)是否存在script-src 'self'，因为它测试了注入的内联脚本是否可以运行。所以实际测试的值是不包含unsafe-inline或*

it('should not run injected scripts', function() {
  var script = 'window.inlineTagEvaluated = false;';
  script += 'var callback = arguments[arguments.length - 1];';
  script += 'var script = document.createElement("script");';
  script += 'script.text = "window.inlineTagEvaluated = true;";';
  script += 'document.head.appendChild(script);'
  script += 'callback(window.inlineTagEvaluated);';

  expect(browser.executeAsyncScript(script)).toBe(false);
});

测试CSP意味着我们不能运行unsafe-eval代码有点棘手。因为内联脚本是被禁止的，所以我不能在运行时将eval的用法注入页面。我这样做的方法是在服务器/test-eval.js上放置一个包含以下内容的文件(感谢AngularJS源代码提供的一种方法)

try {
  new Function('');
}
catch(e) {
  window.caught = true;
}

然后在测试运行时将其添加到DOM：

it('should not run eval-ed scripts', function() {
  var script = 'window.caught = false;'
  script += 'var callback = arguments[arguments.length - 1];';
  script += 'var script = document.createElement("script");';
  script += 'script.src = "/eval-test.js";';
  script += 'script.onload = function() {callback(window.caught);};';
  script += 'script.onerror = function() {callback(window.caught);};';
  script += 'document.head.appendChild(script);'

  expect(browser.executeAsyncScript(script)).toBe(true);
});

我必须承认，我并不喜欢在我正在测试的服务器上安装一些仅用于测试的东西。

测试我们不能从其他域运行脚本也有点棘手。为此，我在单个测试的生命周期内设置了一个HTTP服务器，提供一个简单的Javascript文件。(它从与站点其余部分不同的端口提供服务，因此对于CSP而言，它被视为不同的域)。

it('should not run scripts from another domain', function() {

  function setupServer() {
    var defer = protractor.promise.defer();

    require('http').createServer(function (request, response) {
       response.setHeader('Content-Type', 'application/javascript');
       response.end('window.externalScriptEvaluated = true;');
    }).listen(8081, function() {
      defer.fulfill();
    });
    return defer.promise;
  }
  protractor.promise.controlFlow().execute(setupServer);

  var script = 'window.externalScriptEvaluated = false;';
  script += 'var callback = arguments[arguments.length - 1];';
  script += 'var script = document.createElement("script");';
  script += 'script.src = "http://localhost:8081/";';
  script += 'script.onload = function() {callback(window.externalScriptEvaluated);};';
  script += 'script.onerror = function() {callback(window.externalScriptEvaluated);};';
  script += 'document.head.appendChild(script);'
  expect(browser.executeAsyncScript(script)).toBe(false);
});

下面的部分测试style-src 'self'是否存在，因为它测试是否可以应用内联样式(因此实际测试的值是不包含unsafe-inline还是*)

it('should not use injected styles', function() {
  var script = 'document.body.style.backgroundColor = "rgb(0, 1, 1)";';
  script += 'var callback = arguments[arguments.length - 1];';
  script += 'var style = document.createElement("style");';
  script += 'style.type = "text/css";';
  script += 'style.appendChild(document.createTextNode("body {background-color: rgb(1, 0, 0) !important}"));';
  script += 'document.head.appendChild(style);'
  script += 'callback(window.getComputedStyle(document.body).getPropertyValue("background-color"));';

  expect(browser.executeAsyncScript(script)).toBe("rgb(0, 1, 1)");
});