Google App Script using Materialize form returns error "ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'"

I am using Materialize form in a google app script as follows.

I get an error if I put 'name="action"' in the button's attribute, and it does not call the server-side function. I would like to know what this is for and why I get the error.

test.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>

Server-side:

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


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

The error I get in my Chrome's console log is:

Refused to frame 'https://xxxxxxx-script.googleusercontent.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

and NetworkError of HTTP 500 is thrown.

Solution

Consideration

Apparently having at least one input with the name attribute equal to "action" will trigger this behavior:

<!-- 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="">

Solution

Since you cannot pass any other DOM element to the server besides a form object you should definitely change your button's name attribute in order for this to work.

Reference

Forms HTML Service