No internet connection
  1. Home
  2. Support

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

By Bryce Wray @BryceWray
    2019-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
    • 21 replies

    There are 21 replies. Estimated reading time: 22 minutes

    1. 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 @BryceWray
          2019-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 @BryceWray
              2019-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. 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 @BryceWray
                    2019-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. 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 @BryceWray
                          2019-04-18 10:15:12.947Z

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

                          1. In reply toKajMagnus:
                            Bryce Wray @BryceWray
                              2019-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. In reply toKajMagnus:
                                TTreigh Mawaka @treigh
                                  2022-07-25 17:06:50.321Z

                                  Hi Kaj, I'm setting up Talkyard comments in a Nuxt 3 app but I'm facing the same CSP error Refused to frame 'https://c1.ty-cdn.net/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'"..

                                  I tried loading the demo comments but that's not working either. I signed up for Talkyard's hosted solution so I don't have access to any source files. Can you please help?

                                  Here's my embed code:

                                        <Script>
                                          talkyardServerUrl={{talkyardServerUrl}}
                                        </Script>
                                        <Script async defer src="https://c1.ty-cdn.net/-/talkyard-comments.min.js"></Script>
                                        <div class="talkyard-comments mt-3" :data-discussion-id="post.id"></div>
                                  

                                  Thanks

                                  1. Hi Treigh, what's the value of talkyardServerUrl? I wonder if it's https://c1.ty-cdn.netbecause it seems that's what the browser tries to bembed: Refused to frame 'https://c1.ty-cdn.net/'

                                    Could also be that talkyardServerUrl hasn't been set — then, talkyard-comments.min.js tries to load comments from its own domain, that is, c1.ty-cdn.net and that'd give the same error.

                                    You should set talkyardServerUrl to something like: https://comments-for-your-blog.your-talkyard-server.

                                    I could have a look at your blog if you post a link

                                    1. TTreigh Mawaka @treigh
                                        2022-07-28 12:55:06.795Z

                                        That's what it sounds like. I'll take a look as soon I reach my desk and report back. Thanks for the follow-up.

                          2. Progress
                          3. Bryce Wray @BryceWray
                              2019-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 @BryceWray
                                    2019-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 @BryceWray
                                          2019-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 @BryceWray
                                                2019-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 @BryceWray
                                                      2019-04-20 11:26:16.023Zreplies toKajMagnus:

                                                      Greatly appreciated, sir.