No internet connection
  1. Home
  2. Support

CSP (content-security-policy) errors prevent test on local Hugo install

By Bryce Wray @BryceWray2019-04-17 01:39:01.086Z

Posted this question in https://hugo-demo.talkyard.io/posts/demo-and-instructions/ and to @KajMagnus's via Twitter but haven't received an answer...
Want to test Talkyard on my local Hugo install to decide whether to sign up, but keep getting the CSP error. I saw instructions for a signed-up GatsbyJS user with a similar problem; any CSP-related help available for someone just curious? Thanks.

Solved in post #13, click to view
  • 18 replies

There are 18 replies. Estimated reading time: 20 minutes

  1. KajMagnus @KajMagnus2019-04-17 04:50:53.999Z

    Hi @brycewray,

    What's the address to your localhost blog? What's the value of the Allow embedding from setting? (on the /-/admin/settings/embedded-comments admin page). Talkyard is supposed to allow embedding automatically, on localhost, by adding Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:* if the embedding hostname is localhost (that is, if your blog runs on e.g. http://localhost:1234).

    (Sorry for not seeing the question over at hugo-demo.talkyard.io — I'll check if I'm using the "wrong" email notifications account over there. I don't often check my Twitter account, maybe I thougt any notification from Twitter was a newsletter email.)

    1. Bryce Wray @BryceWray2019-04-17 04:54:27.867Z

      I guess that's my problem: I hadn't realized that in the pure demo I would have access to an admin page like that. Will have to check tomorrow (U. S, time). Thanks.

      1. In reply toKajMagnus:
        Bryce Wray @BryceWray2019-04-17 23:38:04.311Z

        In my case, localhost blog is http://192.168.254.12:1313 -- when I try going to http://192.168.254.12:1313/-/admin/settings/embedded-contents I get a 404. I also set localhost to appear at http://localhost:1313 and then tried http://localhost:1313/-/admin/settings/embedded-contents -- but, again, got a 404.

        1. KajMagnus @KajMagnus2019-04-18 08:04:23.487Z

          Hi again, the URL path, /-/admin/settings/embedded-comments is for the Talkyard server, not the blog. If you've created a site using Talkyard's blog hosting, you'd go to: https://comments-for-your-blog-com.talkyard.net/-/admin/settings/embedded-comments. Or if it's a self hosted Talkyard site, you'd go to: https://your-talkyard-server/-/admin ....

          However if you go to http://192.168.254.12:1313/-/admin/settings/embedded-contents, or https://your.blog.com/-/admin/settings/embedded-comments — that'll be 404 Not Found, because your blog software doesn't know about that URL path. It's for the Talkyard server only.

          If your blog is at: http://localhost:1313, then, the comments should appear there, without you configuring the Allow embedding from setting. However, for this to work: http://192.168.254.12:1313, then, you need to add http://192.168.254.12:1313 to the Allow embedding from setting. Only http://localhost:1313 works automatically (because the hostname is "localhost").

          1. Bryce Wray @BryceWray2019-04-18 09:24:36.074Z

            So in the first set of instructions in https://hugo-demo.talkyard.io/posts/demo-and-instructions/ --- where the idea is trying Talkyard "without signing up or getting a server," as that page says --- how then would I get around the CSP issue (since I have followed those instructions but am still unable to see the Talkyard section on a local page because I get the CSP error in Inspector)? Thanks for your continued patience.

            1. KajMagnus @KajMagnus2019-04-18 09:46:25.812Z

              That demo embedded-blog-comments site, i.e. https://comments-demo.talkyard.io, allows embedding from anywhere. It has this "Allow embedding from": http://* https://* http://*:* https://*:* — that is, all addresses. (One shouldn't configure one's own blog like this. I think it's ok for a test demo site though)

              Example: If you copy this into a test-comments-page.html file:

              <html>
              <head>
              <title>Embedded comments test</title>
              </head>
              <body style="background: #303; color: #ccc; font-family: monospace">
              <p>Embedded comments test page.</p>
              
              <script>talkyardServerUrl='https://comments-demo.talkyard.io';</script>
              <script async defer src="https://c1.ty-cdn.net/-/talkyard-comments.min.js"></script>
              <div class="talkyard-comments" data-discussion-id="">
              </div>
              
              <p>/End of page.</p>
              </body>
              </html>
              

              and then start a server and show that page (e.g. on your laptop, with nodejs http-server, at say http://127.0.0.1:8080/test-comments-page.html or http://localhost:8080/test-comments-page.html), then the demo site embedded comments, will appear.

              1. Bryce Wray @BryceWray2019-04-18 10:15:12.947Z

                OK, thanks. I will give this a try later.

                1. In reply toKajMagnus:
                  Bryce Wray @BryceWray2019-04-19 00:41:07.104Z

                  Still no luck. Put the script code into one of my Hugo post templates in place of code that has been running another vendor's comments code. It appears blank, with the following error message in the Inspector:

                  Refused to display 'https://c1.ty-cdn.net/-/embedded-comments?embeddingUrl=http://localhost:1313/posts/2019/04/publish-or-perish/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

                  So, again am wondering how I can configure around this issue while only demo'ing in localhost.

                  1. KajMagnus @KajMagnus2019-04-19 03:28:20.524Z2019-04-19 03:34:24.968Z

                    That probably means the Allow embedding from field is empty. I just looked at the source, and then, if it's empty, that situation — i.e. frame-ancestors 'none' — happens. Try filling in Allow embedding from with the real address to your blog, like, https://your.blog.com. Then it should work (both from your real blog, and from your localhost).

                    You've installed on your own server? Because if using the Talkyard .net hosting, then, during the signup phase, one is asked for the address to one's blog, and then the Allow embedding from field is automatically set to that value. — When one self hosts Talkyard, I should make things work in the same way, so Allow embedding from won't be unintentionally empty.

                    (B.t.w. the relevant source code:

                        ....
                        if (allowEmbeddingFrom.isEmpty || allowEmbeddingIsWeird) {
                          response = response.withHeaders(
                              "X-Frame-Options" -> "DENY",  // For old browsers.
                              ContSecPolHeaderName -> frameAncestorsNone,
                              XContSecPolHeaderName -> frameAncestorsNone) // IE11
                        }
                        else {
                          // People sometimes try out the blog comments, on localhost; let them do that,
                          // without updating the allow-embedding-from setting. [5RTCN2]
                          val embeddingHostname = embeddingUrl.flatMap(GetHostnameRegex.findGroupIn)
                          val allowIfLocalhost = if (embeddingHostname isNot "localhost") "" else {
                            //  .... (long comment) ...
                            " http://localhost:* https://localhost:*"
                          }
                          val framePolicy = frameAncestorsSpace + allowEmbeddingFrom + allowIfLocalhost
                    

                    )

                    If Allow embedding from is not empty, would you like to copy-paste it here? (Optionally replacing your blog's domain with example .com)

        2. Progress
        3. Bryce Wray @BryceWray2019-04-19 09:47:42.811Z

          I suppose this gets to the heart of the matter. What I don't understand is where I can access that very setting unless I have signed up already. I realize the answer will probably make me feel as foolish as these questions are proving me to be :-) --- but I really would like to give this a try, if only I could understand how to get to that setting without having signed up. Or is this code excerpt something that (while only testing and not yet having signed up) I need to include somewhere in a Hugo template page, much as I put the embedding code in one in a so-far-vain attempt to get it to work?

          1. KajMagnus @KajMagnus2019-04-19 12:07:37.978Zreplies toBryceWray:

            Would you like to copy paste the code you pasted in the Hugo template?
            And the name of the template you're using, and which file in the template you have edited?
            And the talkyardServerUrl = "..." value from the Hugo config file?
            (If your code is in a GitHub repo, I could have a look, there.)

            is this code excerpt something that [...] I need to include somewhere in a Hugo template page

            Hmm what code excerpt do you have in mind? (fairly many code snippets are mentioned above :- )) Yes you do need to copy the comments HTML code into a Hugo theme file. On my Hugo demo blog, I placed the following (from the Hugo instructions) in file themes/pickles/layouts/_default/single.html:

                <script>talkyardServerUrl='{{ .Site.Params.talkyardServerUrl }}';</script>
                <script async defer src="{{ .Site.Params.talkyardScriptUrl | default "https://c1.ty-cdn.net/-/talkyard-comments.min.js" }}"></script>
                <!-- You can specify a per page discussion id on the next line, if your URLs might change. -->
                <div class="talkyard-comments" data-discussion-id="{{ .Params.discussionId }}" style="margin-top: 45px;">
                <noscript>Please enable Javascript to view comments.</noscript>
                <p style="margin-top: 25px; opacity: 0.9">Comments powered by
                <a href="https://www.talkyard.io">Talkyard</a>.</p>
                </div>
            

            and for me (with Chrome Version 73.0.3683.75) that works fine when combined with:

            [params]
            talkyardServerUrl = "https://comments-demo.talkyard.io"
            

            in config.toml.

            Here's the GitHub repo for the demo b.t.w.:
            https://github.com/debiki/hugo-talkyard-demo.git
            and the Hugo theme file in wich I've inserted the comments code:
            https://github.com/debiki/hugo-talkyard-demo-theme/blob/master/layouts/_default/single.html

            1. Bryce Wray @BryceWray2019-04-19 12:17:10.114Z2019-04-19 12:19:41.578Zreplies toKajMagnus:

              I meant the two snippets you mentioned in this most recent reply (and I greatly appreciate your continuing patience). I did manage to get it going once I looked at config.toml again and realized I had put the "talkyardServerUrl" statement under [blackFriday] instead of [params], so that's clearly PEBKAC on my fault. :-/ However, when I tried to put in a comment to test it, I got the following error:

              Error calling /-/load-my-page-data?pageId=0:
              {"line":10,"column":316261,"sourceURL":"https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js"},
              details: me_toBriefUser@https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:316261
              https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:339655
              $Dispatcher_invokeCallback@https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:264736
              dispatch@https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:264498
              handleViewAction@https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:265427
              n@https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:304663
              https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:308344
              https://tyw-49f8.kxcdn.com/-/assets/v0.6.30-WIP-1/slim-bundle.min.js:10:279446
              promiseReactionJob@[native code]
              

              ...so close, and yet so far. :-/ [Note: if it matters, that was using a GitHub login.]

              ReplySolution
              1. KajMagnus @KajMagnus2019-04-19 12:23:01.747Zreplies toBryceWray:

                Ok, maybe I can edit the instructions and point out that the conf value should be in the [params] section. I place config values in the wrong sections myself too every now and then ... and then I make myself really confused :- P

                About the login problem. You don't happen to have 3rd party cookies disabled? The error looks similar to the error here:
                https://www.talkyard.io/-217/disabling-3rd-party-cookies-in-ones-browser-breaks-blog-comments-login

                1. Bryce Wray @BryceWray2019-04-19 12:39:44.695Z

                  Actually, I didn't. I have now gotten it to work in Chrome, Firefox, and iOS Safari but macOS Safari --- while it now will display the Talkyard widget --- is throwing errors when I try to reply with my GitHub credentials. It gives me a message as follows:

                  Error 403 forbidden
                  Not logged in [TyE0LGDIN_]

                  ...and this persists even if I open GitHub, logged in as myself, in another tab. So I'm guessing there is some macOS Safari authentication weirdness going on, here. Nonetheless, I now can see it and use it in Chrome, Firefox, and iOS Safari, so at least I can test satisfactorily. Thanks again! [And, just to see whether it matters, I logged into this page from macOS Safari, again via GitHub, and will try to post the reply here. If you see this, it worked.]

                  Edit: It did. And, BTW: no need to edit your instructions. They're very clear. I just copied/pasted that line into the wrong area. I do know better. :-D

                  1. KajMagnus @KajMagnus2019-04-19 12:53:10.400Zreplies toBryceWray:

                    Ok. Just to see, if I understand this correctly — you can login, to the comments, with GitHub, in all of Chrome, FF, iOS Safari — and not in macOS Safari?

                    And, since I can see your reply above — you're able to login with macOS Safari, to this forum (right). However not to the embedded comments <iframe>. I'm thinking this might be related to Safari's Intelligent Tracking Prevention (apparently added to macOS Mojave), which I think can block friendly login cookies in an iframe (so, can break blog comments login, but not login to this forum). I would think if I make Talkyard login work in an <ifram> also without cookies, this macOS login problem will be gone.

                    Can I ask what iOS and macOS versions are you on?

                    1. Bryce Wray @BryceWray2019-04-19 12:55:54.385Zreplies toKajMagnus:

                      You're correct; that's the situation, exactly. Versions are: macOS 10.14.4; and iOS 12.2 --- all current versions.

                      1. KajMagnus @KajMagnus2019-04-20 11:24:30.158Zreplies toBryceWray:

                        Ok, thanks for the info. I marked the post above about [params] as the answer to this question (and b.t.w. I updated the Hugo instructions so hopefully others won't run into this issue too).

                        I did some progress yesterday with enabling cookieless login, for macOS Safari with ITP, and browsers with 3rd party cookiest disabled. I'd think i'll have released something in about two weeks. I'll post updates in the other topic, about that:
                        https://www.talkyard.io/-217/disabling-3rd-party-cookies-in-ones-browser-breaks-blog-comments-login

                        1. Bryce Wray @BryceWray2019-04-20 11:26:16.023Zreplies toKajMagnus:

                          Greatly appreciated, sir.