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.
- 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 addingContent-Security-Policy: frame-ancestors http://localhost:* https://localhost:*
if the embedding hostname islocalhost
(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.)Bryce Wray @BryceWray
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.
- 回复KajMagnus⬆:
Bryce Wray @BryceWray
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.
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
, orhttps://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 theAllow embedding from
setting. However, for this to work:http://192.168.254.12:1313
, then, you need to addhttp://192.168.254.12:1313
to theAllow embedding from
setting. Onlyhttp://localhost:1313
works automatically (because the hostname is "localhost").Bryce Wray @BryceWray
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.
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 sayhttp://127.0.0.1:8080/test-comments-page.html
orhttp://localhost:8080/test-comments-page.html
), then the demo site embedded comments, will appear.Bryce Wray @BryceWray
OK, thanks. I will give this a try later.
- 回复KajMagnus⬆:
Bryce Wray @BryceWray
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.
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)
- 回复KajMagnus⬆:TTreigh Mawaka @treigh
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
KajMagnus @KajMagnus2022-07-28 09:14:28.357Z
Hi Treigh, what's the value of
talkyardServerUrl
? I wonder if it'shttps://c1.ty-cdn.net
because 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
- TTreigh Mawaka @treigh
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.
- 进展
- Bryce Wray @BryceWray
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?
- KajMagnus @KajMagnus2019-04-19 12:07:37.978Z回复BryceWray⬆:
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 thetalkyardServerUrl = "..."
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 - Bryce Wray @BryceWray
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.]
- KajMagnus @KajMagnus2019-04-19 12:23:01.747Z回复BryceWray⬆:
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 :- PAbout 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 - Bryce Wray @BryceWray
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
- KajMagnus @KajMagnus2019-04-19 12:53:10.400Z回复BryceWray⬆:
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?
- Bryce Wray @BryceWray
You're correct; that's the situation, exactly. Versions are: macOS 10.14.4; and iOS 12.2 --- all current versions.
- KajMagnus @KajMagnus2019-04-20 11:24:30.158Z回复BryceWray⬆:
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