window.open 带标题

Posted 2023-02-25

【中文标题】window.open 带标题

【英文标题】：window.open with headers

【发布时间】：2011-05-18 13:54:05

【问题描述】：

我可以控制window.open（跨浏览器）发送的HTTP头吗？

如果没有，我能否以某种方式 window.open 一个页面，然后在其弹出窗口中使用自定义标头发出我的请求？

我需要一些巧妙的技巧。

【参考方案1】：

我可以控制window.open（跨浏览器）发送的HTTP头吗？

没有

如果没有，我能否以某种方式 window.open 一个页面，然后在其弹出窗口中使用自定义标头发出我的请求？

您可以请求一个触发服务器端程序的 URL，该程序使用任意标头发出请求，然后返回响应 您可以运行 javascript（可能会告别渐进式增强），该 JavaScript 使用 XHR 发出带有任意标头的请求（假设 URL 符合同源策略），然后在 JS 中处理结果。

我需要一些巧妙的技巧...

如果您描述问题而不是询问可能的解决方案是否可行，这可能会有所帮助。

【讨论】：

即使使用 XHR，对标头自定义的支持也有限 (w3.org/TR/XMLHttpRequest/#the-setrequestheader-method)

@FreeConsulting 链接实际上是：w3.org/TR/XMLHttpRequest/#the-setrequestheader%28%29-method

这对于 有什么不同吗？这似乎保留了登录状态。

@sureshvv — 不，您也无法控制发送到那里的标头。如果它保留了登录状态，那是因为登录方法不使用自定义标头。

不需要自定义标题。只是基本的身份验证。你如何将它传递给 window.open()？

【参考方案2】：

如果您控制服务器端，是否可以在查询字符串中设置标头值并这样发送？ 这样，如果在标头中找不到它，您可以从查询字符串中解析它。

只是一个想法......而你要求一个狡猾的黑客:)

【讨论】：

是不是在查询字符串中添加标题容易受到任何安全问题的影响？因为它不会在 https 中加密。

查询字符串使用 https 加密。 ***.com/questions/2629222/… 但是你仍然不应该在查询字符串中放入任何敏感信息...... OP 没有指定他们想在查询字符串中放入什么样的标题。

【参考方案3】：

作为最好的anwser 使用XMLHttpResponse 编写的，除了window.open，我将abstracts-anwser 作为一个实例。

主Js文件为download.jsDownload-JS

 // var download_url = window.BASE_URL+ "/waf/p1/download_rules";
    var download_url = window.BASE_URL+ "/waf/p1/download_logs_by_dt";
    function download33() 
        var sender_data = "start_time":"2018-10-9", "end_time":"2018-10-17";
        var x=new XMLHttpRequest();
        x.open("POST", download_url, true);
        x.setRequestHeader("Content-type","application/json");
//        x.setRequestHeader("Access-Control-Allow-Origin", "*");
        x.setRequestHeader("Authorization", "JWT " + localStorage.token );
        x.responseType = 'blob';
        x.onload=function(e)download(x.response, "test211.zip", "application/zip" ); 
        x.send( JSON.stringify(sender_data) ); // post-data
    

【参考方案4】：

您不能在弹出窗口中直接使用 window.open() 添加自定义标题 但要工作，我们有两种可能的解决方案

---

编写 Ajax 方法以在单独的 html 文件中调用带有标题的特定 URL，并将该 HTML 用作<i>window.open()</i> 中的 URL 这是abc.html

        $.ajax(
        url: "ORIGIONAL_URL",
        type: 'GET',
        dataType: 'json',
        headers: 
            Authorization : 'Bearer ' + data.id_token,
            AuthorizationCheck : 'AccessCode ' +data.checkSum , 
            ContentType :'application/json'
        ,

        success: function (result) 
              console.log(result);
        ,
        error: function (error) 

         );

调用html

window.open('*\abc.html')

如果请求的 URL 中未启用 CORS，则此处的 CORS 策略可以阻止请求。

---

您可以请求一个触发服务器端程序的 URL，该程序使用自定义标头发出请求，然后返回重定向到该特定 URL 的响应。

假设在 Java Servlet(/requestURL) 中我们会发出这个请求

`

        String[] responseHeader= new String[2];
        responseHeader[0] = "Bearer " + id_token;
        responseHeader[1] = "AccessCode " + checkSum;

        String url = "ORIGIONAL_URL";

        URL obj = new URL(url);
        HttpURLConnection urlConnection = (HttpURLConnection) obj.openConnection();
        urlConnection.setRequestMethod("GET");
        urlConnection.setDoInput(true);
        urlConnection.setDoOutput(true);
        urlConnection.setRequestProperty("Content-Type", "application/json");
        urlConnection.setRequestProperty("Accept", "application/json");
        urlConnection.setRequestProperty("Authorization", responseHeader[0]);
        urlConnection.setRequestProperty("AuthorizationCheck", responseHeader[1]);
        int responseCode = urlConnection.getResponseCode();
        if (responseCode == HttpURLConnection.HTTP_OK) 
            BufferedReader in = new BufferedReader(new 
                         InputStreamReader(urlConnection.getInputStream()));
            String inputLine;
            StringBuffer response1 = new StringBuffer();

            while ((inputLine = in.readLine()) != null) 
                response1.append(inputLine);
            
            in.close();
            response.sendRedirect(response1.toString());
            // print result
            System.out.println(response1.toString());
         else 
            System.out.println("GET request not worked");
        

`

在window.open('/requestURL')中调用servlet

【参考方案5】：

改用 POST

虽然使用window.open() 构造GET 查询很容易，但这是个坏主意（见下文）。一种解决方法是创建一个提交 POST 请求的表单。像这样：

<form id="helper" action="###/your_page###" style="display:none">
<inputtype="hidden" name="headerData" value="(default)">
</form>

<input type="button" onclick="loadNnextPage()" value="Click me!">

<script>
function loadNnextPage() 
  document.getElementById("helper").headerData.value = "New";
  document.getElementById("helper").submit();

</script>

当然，您需要在服务器端进行处理；正如其他人建议的那样，您可以创建一个“代理”脚本，代表您发送标头并返回结果。

GET 问题

查询字符串存储在浏览器历史记录中， 可以肩扛 复制粘贴， 而且您通常不希望“刷新”同一事务很容易。

【参考方案6】：

遗憾的是，在执行 window.open() 时您无法控制标题

很好，很简单，我如何设法打开带有自定义标题的文件：

const viewFile = async (url) => 

  // Change this to use your HTTP client
      fetch(url, /*YOUR CUSTOM HEADER*/ ) // FETCH BLOB FROM IT
        .then((response) => response.blob())
        .then((blob) =>  // RETRIEVE THE BLOB AND CREATE LOCAL URL
          var _url = window.URL.createObjectURL(blob);
          window.open(_url, "_blank").focus(); // window.open + focus
      ).catch((err) => 
        console.log(err);
      );
;

下载文件到缓存 window.open 缓存