时间戳

首页 > 解决方案 > 使用 Materialize 表单的 Google App 脚本返回错误“祖先违反以下内容安全策略指令：“frame-ancestors 'self'”

google-apps-script - 使用 Materialize 表单的 Google App 脚本返回错误“祖先违反以下内容安全策略指令：“frame-ancestors 'self'”

问题描述

我在谷歌应用程序脚本中使用 Materialize 表单，如下所示。

如果我将 'name="action"' 放在按钮的属性中，我会收到错误消息，并且它不会调用服务器端函数。我想知道这是为了什么以及为什么会出现错误。

测试.html 

<!DOCTYPE html>
<html>
    <head>
    <base target="_top">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script>
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      function readFile(formObject) {
        google.script.run.upload(formObject);
      }
    </script>
  </head>
  <body>
  
  <div class="container">
    <form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data">
      <input name="myFile" type="file" /><br>
      <div class="row">
           <button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Submit<i class="material-icons right">send</i></button>
        </div> <!-- END OF ROW -->
        
    </form>
  </div>
  </body>
</html>

服务器端： 

function doGet() {
  let tmp = HtmlService.createTemplateFromFile('test');
  
  return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


function upload(formObj) {
  Logger.log('upload called');
  Logger.log(formObj);
}

我在 Chrome 控制台日志中遇到的错误是：

拒绝框架“ https://xxxxxxx-script.googleusercontent.com/ ”，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self'”。

并抛出 HTTP 500 的 NetworkError。

标签： google-apps-scriptmaterialize

解决方案

考虑

显然，至少有一个 name 属性等于“action”的输入将触发此行为：

<!-- The form action attribute will change referencing the input field when passing the form Object to googe.script.run.myFunction() method-->
<!-- From this: -->
<form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data">
<!-- To this: -->
<form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data" action="[object HTMLButtonElement]" method="get" target="">

解决方案

由于除了对象之外，您不能将任何其他 DOM 元素传递给服务器，因此form您绝对应该更改按钮的 name 属性以使其正常工作。

参考

表单 HTML 服务

推荐阅读