在BlockTester中获取localhost的混合内容错误

Question

我使用salesforce blocksdk代码示例开发了一个应用程序。我的代码适用于blocktester.heroku.com，但现在不起作用。我收到混合内容错误。

NPM审核报告了3个与js-yaml和mime有关的漏洞。我不确定如何解决这些问题，也不确定它们是否与混合内容错误有关。

我应该再次执行npm init并重新开始吗？

进行一次npm审核，发现3个漏洞

    var sdk = new window.sfdc.BlockSDK(null, null, true);

    function paintButton() {
        /* Change Button settings */
        var button_text = document.getElementById('button-text').value;
        var button_url = document.getElementById('button-url').value;
        var button_align = document.getElementById('button-align').value;
        sdk.setContent('<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="40">&nbsp;</td><td><table border="0" cellspacing="0" cellpadding="0" width="250" align="' + button_align + '"><tr><td height="48" align="center" bgcolor="#00aeef" valign="middle"><a href="' + button_url + '" style="font-size: 16px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border: 1px solid #00aeef; display: block; text-transform: uppercase; font-weight: bold; vertical-align: middle;" target="_blank">' + button_text + '</a></td></tr></table></td><td width="40">&nbsp;</td></tr></table>');
    }

    body { font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        line-height: 23px;
        color: #333;
    }
    h1 { text-transform: uppercase;
        font-size: 26px;
        letter-spacing: 1px; 
    }
    label { display: block; padding-bottom: .5em; }
    section { padding-top: 1em; padding-bottom: 1em; }
    input[type='text'] {
        width: 300px;
        padding: 5px;
        font-size: 16px;
        color: #333;
    }
    input[type='submit'] {
        background-color: #00aeef;
        border-color: #00aeef;
        padding: 10px 12px;
        color: #fff;
        border-radius: 2px;
        font-size: 16px;
        text-transform: uppercase;
    }

<script src="js/blocksdk.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap" rel="stylesheet">


<main>
    <header>
        <h1>Custom Button Builder</h1>
    </header>
    <section>
        <label for="button-text">Button Text:</label>
        <input type="text" id="button-text" />
    </section>
    <section>
        <label for="button-url">Button URL:</label>
        <input type="text" id="button-url" />
    </section>
    <section>
        <label for="button-align">Button Alignment:</label>
        <select id="button-align">
            <option value="center">Center</option>
            <option value="left">Left</option>
        </select>
    </section>
    <section>
        <input type="submit" value="Change Button" onclick="paintButton();" />
    </section>
</main>

Blocktester应该显示应用程序UI，但是控制台报告混合内容错误。