使用Chrome扩展程序将http重定向到https

高洛·罗登(Golo Roden)

我正在开发许多使用https服务器的Node.js应用程序在开发它们时,我localhost使用自签名证书运行它们基本上,一切正常,但是我有两个问题:

  1. 当我https://localhost:3000第一次将浏览器指向时,它会警告我有关不受信任的证书的信息。当然,这是正确的(而且很重要),但是在开发过程中却在不断进步。当然,我可以将证书添加为受信任的证书,但是它们会不时更改,并且我不想使证书存储混乱。

  2. 有时,我只是忘记https在地址栏中输入该部分,因此Chrome尝试使用加载网站http无论出于什么原因,Chrome都没有意识到没有Web服务器响应http请求,而是加载,加载和加载……

我想解决这两个问题的方法是创建一个Chrome扩展程序,该扩展程序位于地址栏旁边,并提供一个按钮,您可以使用该按钮来切换其状态:

  • 如果扩展名被禁用,它什么也不做。
  • 如果启用了扩展,并且您向localhost(并且只有这样!)发送请求,它将执行以下两项操作:
    1. 如果请求使用http,但页面仍在pending几秒钟后,则应尝试使用https
    2. 临时接受任何证书,无论它是否被浏览器信任。

明确说明:这些规则仅对适用localhost

所以,现在我的问题是:

  • 完全可以使用Chrome扩展程序来实现这种功能吗?
  • 由于我在编写Chrome扩展程序方面的经验绝对为零,因此什么是一个很好的起点,我应该在Google上查找哪些术语?
加尔帕克

谷歌浏览器扩展程序文档是一个伟大的地方开始。使用Chrome扩展程序,您描述的所有内容都可以使用,除了“证书接受”部分。(我并不是说这是不可能的,我只是不知道这是不可能的,但是我真的惊讶(并担心)。)

当然,总会有--ignore-certificate-errors命令行开关,但它不会localhost与其他域区分开

如果您决定实施其余功能,建议您先研究chrome.tabs和/或chrome.webRequest(同样,让我提到“内容脚本”不太可能有任何用处。)


就是说,下面是演示扩展的一些代码(只是为了让您入门)。

它的作用是:
停用->无
激活时->侦听指向类似URL的选项卡http://localhost[:PORT][/...]并将其重定向到https(不等待响应或其他任何内容,它只是立即重定向它们)。

使用方法:
单击浏览器操作图标以激活/停用。

当然,它不是完美/完整的,但这是一个起点:)


扩展目录结构:

        extention-root-directory/
         |_____ manifest.json
         |_____ background.js
         |_____ img/
                 |_____ icon19.png
                 |_____ icon38.png

manifest.json :(
有关可能字段的更多信息,请参见此处。)

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "default_locale": "en",
    "offline_enabled": true,
    "incognito":       "split",

    // The background-page will listen for
    // and handle various types of events
    "background": {
        "persistent": false,   // <-- if you use chrome.webRequest, 'true' is required
        "scripts": [
            "background.js"
        ]
    },

    // Will place a button next to the address-bar
    // Click to enable/disable the extension (see 'background.js')
    "browser_action": {
        "default_title": "Test Extension"
        //"default_icon": {
        //    "19": "img/icon19.png",
        //    "38": "img/icon38.png"
        //},
    },

    "permissions": [
        "tabs",                  // <-- let me manipulating tab URLs
        "http://localhost:*/*"   // <-- let me manipulate tabs with such URLs 
    ]
}

background.js :(
相关文档:背景页面事件页面浏览器操作chrome.tabs API

/* Configuration for the Badge to indicate "ENABLED" state */
var enabledBadgeSpec = {
    text: " ON ",
    color: [0, 255, 0, 255]
};
/* Configuration for the Badge to indicate "DISABLED" state */
var disabledBadgeSpec = {
    text: "OFF",
    color: [255, 0, 0, 100]
};


/* Return whether the extension is currently enabled or not */
function isEnabled() {
    var active = localStorage.getItem("active");
    return (active && (active == "true")) ? true : false;
}

/* Store the current state (enabled/disabled) of the extension
 * (This is necessary because non-persistent background pages (event-pages)
 *  do not persist variable values in 'window') */
function storeEnabled(enabled) {
    localStorage.setItem("active", (enabled) ? "true" : "false");
}

/* Set the state (enabled/disabled) of the extension */
function setState(enabled) {
    var badgeSpec = (enabled) ? enabledBadgeSpec : disabledBadgeSpec;
    var ba = chrome.browserAction;
    ba.setBadgeText({ text: badgeSpec.text });
    ba.setBadgeBackgroundColor({ color: badgeSpec.color });
    storeEnabled(enabled);
    if (enabled) {
        chrome.tabs.onUpdated.addListener(localhostListener);
        console.log("Activated... :)");
    } else {
        chrome.tabs.onUpdated.removeListener(localhostListener);
        console.log("Deactivated... :(");
    }
}

/* When the URL of a tab is updated, check if the domain is 'localhost'
 * and redirect 'http' to 'https' */
var regex = /^http(:\/\/localhost(?::[0-9]+)?(?:\/.*)?)$/i;
function localhostListener(tabId, info, tab) {
    if (info.url && regex.test(info.url)) {
        var newURL = info.url.replace(regex, "https$1");
        chrome.tabs.update(tabId, { url: newURL });
        console.log("Tab " + tabId + " is being redirected to: " + newURL);
    }
}

/* Listen for 'browserAction.onClicked' events and toggle the state  */
chrome.browserAction.onClicked.addListener(function() {
    setState(!isEnabled());
});

/* Initially setting the extension's state (upon load) */
setState(isEnabled());

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用htaccess将https重定向到非http并将Http重定向到Https

来自分类Dev

将 http 重定向到 https angularjs 应用程序

来自分类Dev

使用Google chrome扩展程序重定向到url

来自分类Dev

将 HTTP 重定向到 HTTPS 还是拒绝使用 HTTP?

来自分类Dev

在opencart中使用htaccess将https重定向到http

来自分类Dev

使用301或303将http重定向到https

来自分类Dev

Jetty使用重写将HTTP重定向到HTTPS

来自分类Dev

NestJS将HTTP重定向到HTTPS /强制使用SSL

来自分类Dev

如何使用traefik将http重定向到https?

来自分类Dev

使用htaccess将http重定向到Wordpress的https?

来自分类Dev

使用重写将Apache http重定向到https

来自分类Dev

在OpenCart中使用htaccess将https重定向到http

来自分类Dev

使用fqdn名称时将Http重定向到https

来自分类Dev

使用 htaccess 将 HTTP 重定向到 HTTPS?

来自分类Dev

重定向www。到非www并使用.htaccess将所有http重定向到https

来自分类Dev

重定向www。到非www并使用.htaccess将所有http重定向到https

来自分类Dev

Laravel将Http重定向到Https

来自分类Dev

将 HTTP 重定向到 HTTPS

来自分类Dev

NGINX 将 http 重定向到 https

来自分类Dev

将 http:// 重定向到 https:// 的方法

来自分类Dev

尝试将http重定向到https时,仅使用htaccess在safari中重定向循环

来自分类Dev

如何使用301重定向而不是302将HTTP站点重定向到HTTPS站点

来自分类Dev

如何将http重定向到https和将https:// www重定向到https://

来自分类Dev

将http重定向到https(https将http重定向到默认值)

来自分类Dev

在Chrome扩展程序中使用PAC文件重定向HTTPS请求似乎失败

来自分类Dev

使用.htaccess将所有网站链接www重定向到非www并将http重定向到https

来自分类Dev

HTTP 到 HTTPS 重定向

来自分类Dev

htaccess将http://和http:// www重定向到与子域配合使用的https://

来自分类Dev

NGINX将http重定向到https,将非www重定向到ww

Related 相关文章

  1. 1

    使用htaccess将https重定向到非http并将Http重定向到Https

  2. 2

    将 http 重定向到 https angularjs 应用程序

  3. 3

    使用Google chrome扩展程序重定向到url

  4. 4

    将 HTTP 重定向到 HTTPS 还是拒绝使用 HTTP?

  5. 5

    在opencart中使用htaccess将https重定向到http

  6. 6

    使用301或303将http重定向到https

  7. 7

    Jetty使用重写将HTTP重定向到HTTPS

  8. 8

    NestJS将HTTP重定向到HTTPS /强制使用SSL

  9. 9

    如何使用traefik将http重定向到https?

  10. 10

    使用htaccess将http重定向到Wordpress的https?

  11. 11

    使用重写将Apache http重定向到https

  12. 12

    在OpenCart中使用htaccess将https重定向到http

  13. 13

    使用fqdn名称时将Http重定向到https

  14. 14

    使用 htaccess 将 HTTP 重定向到 HTTPS?

  15. 15

    重定向www。到非www并使用.htaccess将所有http重定向到https

  16. 16

    重定向www。到非www并使用.htaccess将所有http重定向到https

  17. 17

    Laravel将Http重定向到Https

  18. 18

    将 HTTP 重定向到 HTTPS

  19. 19

    NGINX 将 http 重定向到 https

  20. 20

    将 http:// 重定向到 https:// 的方法

  21. 21

    尝试将http重定向到https时,仅使用htaccess在safari中重定向循环

  22. 22

    如何使用301重定向而不是302将HTTP站点重定向到HTTPS站点

  23. 23

    如何将http重定向到https和将https:// www重定向到https://

  24. 24

    将http重定向到https(https将http重定向到默认值)

  25. 25

    在Chrome扩展程序中使用PAC文件重定向HTTPS请求似乎失败

  26. 26

    使用.htaccess将所有网站链接www重定向到非www并将http重定向到https

  27. 27

    HTTP 到 HTTPS 重定向

  28. 28

    htaccess将http://和http:// www重定向到与子域配合使用的https://

  29. 29

    NGINX将http重定向到https,将非www重定向到ww

热门标签

归档