-
Hello everoyne,
I think it might be my first time posting here. I have the following issue with a project on a server of my client.
We have a Hetzner virtual server, latest Ubuntu version they have. Cloudron has been installed as well as a Cloudron LAMP for a Website based on Kirby CMS. They website allows users to embed links from different platforms, one of them Tiktok. Everything is working fine, except:
- Tiktok embeds are not being autoplayed on macOS Safari nor any iOS browser
- Not only they dont autoplay, but they cannot be played even with user interaction
I have run many tests and came to the conclusion that is has to do with Cloudron. I have checked the following:
-
I have tested on Hetzner and netcup virtual servers, both showing the same problem.
-
tested on a Hetzer server in the US as well, in case it was due to the location the website is running from (Germany). US server had the same problem
-
the problem does not ocurr on regular shared hosting servers, it has been only on the virtual servers
-
i then created a new virtual server, this time without Cloudron but only LAMP directly (Hetzner has this option as a ready app). Here the autoplay worked! meaning it has to be something in Cloudron. Sadly my server knowledge is poor (thats why I love using Cloudron since makes things a lot easier) so my direct LAMP installation had some other problems, since I didnt really know what settings I need and what shouod be installed etc etc. It took me a while to get the website running, since many php extensions had to be installed, but again, i got it running and without the autoplay issue.
Has anyone any idea what could be the difference between a virtual server running with Cloudron (LAMP app installed) and regular hosting servers or a virtual server with a direct LAMP on it for that matter?
Any help is really greatly appreciated!!!!
-
@squareclouds said in Cloudron+LAMP: Tiktok Embed problems:
Has anyone any idea what could be the difference between a virtual server running with Cloudron (LAMP app installed) and regular hosting servers or a virtual server with a direct LAMP on it for that matter?
Hi! Nice to hear that you use Kirby! This sounds a bit odd to me as well.
Some follow-up questions:
- Did you check the PHP error logs and browser console?
- Which Kirby version do you use?
- Does the issue happen with any browser?
-
@squareclouds welcome to cloudron forum
what PHP version are you using in the Cloudron LAMP and in the virtual server LAMP ?
-
squarecloudsreplied to timconsidine on Apr 24, 2023, 7:46 AM last edited by squareclouds Apr 24, 2023, 7:49 AM
thanks for the first replies
console says:
Blocked a frame with origin "https://www.tiktok.com" from accessing a frame with origin "https://dev.mydomain.de". Protocols, domains, and ports must match.sorry but where can I check the php error logs?
kirby version:
3.8.3php version (of the actual server we are using):
8.1.17as i wrote before, it only happens on macOS Safari and all iOS browsers (safari, chrome, firefox, edge, all of them )
cloudron + lamp php:
8.1.17virtual server LAMP:
ooof, i tested so many things and sadly i deleted all test servers again. but definitely something smaller than 8.2, since the kirby version i am using does not support 8.2 (or at least some plugin does not), so using 8.2 throws an error.hosting server:
i can tell you that the regular shared hosting server uses 8.1.18. again, here everything works. do you think the 8.1.17 / 8.1.18 difference could be it? i have a felling it has to do more with security settings or something, something that cloudron in the background sets a bit differently than regular hosting packageslocalhost:
my MAMP uses 8.1.13, here everything works as well -
@squareclouds Most likely, this is not related to PHP version. But related to CSP or CORS configuration.
-
CSP (Content Security Policy) is set via a header and tells the browser what content is allowed/trusted by your web page. By default, Cloudron does not set any CSP header but you can override it . If your app has a CSP, then it can disable "embedding" of content . For example, youtube/tiktok videos etc can be prevented from being embedded.
-
CORS (Cross origin resource sharing) is set via headers. This tells the browser if ajax calls are allowed from another origin. Cloudron does not set CORS headers either. This means that "random.site.com" cannot call your "dev.mydomain.de" . This is good (tm).
OK, so, with this in mind and trying to understand your error:
Blocked a frame with origin "https://www.tiktok.com" from accessing a frame with origin "https://dev.mydomain.de".
This tells me that the tiktok frame is trying to access your domain. Is this understanding correct? Why is tiktok calling your domain? Maybe it's trying to report back something to the parent domain ? Is this just some random tiktok video? -
-
-
thank you for the reply. yes i think this is going in the right direction. i already tried the CSP, just to see what happens i tried something like default-src * and scripts and other things, but it didnt work, so i think its CORS. that i didnt know how to test with different settings. do you have any suggestions of what i could test?
regarding your question, well i guess Im not sure why it tries to access or what or if that indeed is the case. all other browsers (mainly non apple) aren not having problems or the regular hosting servers even with everything thats apple, as i mentioned, so it is a bit confusing.
-
@squareclouds do you have a barebones html to help reproduce the issue on the LAMP app? So, just embedding a tiktok video in a simple html page and hosting it on the LAMP app will reproduce the issue?
-
@girish good point! i just tried it, yes, it does not work. this link i can share with you
-
@squareclouds seems to work for me here:
Do you maybe have some privacy plugins installed in your browser which might interfere here?
-
@squareclouds loads for me too on Chrome/Linux.
On firefox, only some text shows up. The console says some 'content blocking is enabled' . If i click on the shield icon on the URL bar and disable "Enhanced tracking protection" , it loads for me on Firefox/Linux also.
But I think you said this is only an issue on iphone/mac is it?
-
thank you both for your tests. yes, again, the behaviour is:
- Tiktok embeds are not being autoplayed on macOS Safari nor any iOS browser
- Not only they dont autoplay, but they cannot be played even with user interaction
all other browsers on macOS work fine. BUT dont forget that all of the above works fine on other servers! so it cannot be a browser setting, if the embeds of the same website project work on the other non-cloudron servers it is a bit hard to follow, i know.
-
@squareclouds I don't have access to any apple devices to test and debug this on my own.
-
@nebulon luckily it is a feature that is partially critical. we dont know how many users will be embeding tiktoks, and from those embeds only the ones visited by users on iOS or safari on mac will have the issue. but i am pretty sure its gonna be some very small setting or adjustment somewhere to fix this, we must only figure out where
can one of you point me in the direction of how to set a CORS setting on cloudron? i have no clue about such things but if i play around a bit i might find a solution by chance.
-
@squareclouds CORS related settings would need to be adjusted in the remote server, not the one hosting it. So I don't think this is viable here nor is likely the main issue.
For CSP you can overwrite the headers at https://docs.cloudron.io/apps/#custom-csp or also via meta tags in the html directly. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-
@girish said in Cloudron+LAMP: Tiktok Embed problems:
@squareclouds Most likely, this is not related to PHP version. But related to CSP or CORS configuration.
CSP (Content Security Policy) is set via a header and tells the browser what content is allowed/trusted by your web page. By default, Cloudron does not set any CSP header but you can override it . If your app has a CSP, then it can disable "embedding" of content . For example, youtube/tiktok videos etc can be prevented from being embedded.
CORS (Cross origin resource sharing) is set via headers. This tells the browser if ajax calls are allowed from another origin. Cloudron does not set CORS headers either. This means that "random.site.com" cannot call your "dev.mydomain.de" . This is good (tm).
OK, so, with this in mind and trying to understand your error: Blocked a frame with origin "https://www.tiktok.com" from accessing a frame with origin "https://dev.mydomain.de". This tells me that the tiktok frame is trying to access your domain. Is this understanding correct? Why is tiktok calling your domain? Maybe it's trying to report back something to the parent domain ? Is this just some random tiktok video?
but it seems that there is a call from tiktok to our server, which would mean that our server needs the cors, or not?
-
@squareclouds I don't think tiktok will call your server, anyways there is no service besides apache running to call into.
-
@nebulon random guess - TikTok is doing some Postmessage to parent frame which is getting blocked. This is what I inferred from the original error that @squareclouds posted.
I might get access to a Mac later today, i will try. Very intriguing.
-
@girish thank you dear sir. yes, its strange ^^ crossing fingers that you find out something when you have the chance.
-
girish Staffreplied to squareclouds on Apr 26, 2023, 7:16 PM last edited by girish Apr 26, 2023, 7:18 PM
@squareclouds I tried the site on Mac Ventura with Firefox, Chrome and Safari. It all loads fine.
Also loads fine on an iphone with safari/chrome . So, I am yet to see this fail anywhere.
Did you get reports from all iphone/mac users that the site does not load?
-
@girish you can play the embed? because it loads, yes, but the playing is the problem. it does not autoplay nor you can play it by clicking it, it has no interaction
we are still not live, so we are only a few people, but yes, its not only on my macs and iphones (i have an old iphone and old mac as well, so me alone have tested on 4 devices and then the lead designer as well).
-
@squareclouds I can confirm this on latest iOS. Sitting in a train and can not further investigate.
The play button is rendered but is not clickable while the buttons on the right all link to TikTok (as they should)
-
@jaschaezra thanks for testing.
@squareclouds ok, we can reproduce this too . Looks like a Safari specific issue. Mac/Firefox and Mac/Chrome plays fine (can you confirm this?)
In https://www.buzzfeed.com/buzzfeedstaff/how-to-get-tiktoks-to-play and https://florisdeleeuwnl.zendesk.com/hc/en-us/articles/360013564340-Embedded-video-not-working-in-Safari , they suggest unchecking "Prevent Cross-Site Tracking" but atleast here that doesn't help.
-
@squareclouds do you happen to have your website hosting link with the tiktok embed? No idea what's going on at this point. We have to compare what is working and what is not.
-
squarecloudsreplied to girish on Apr 27, 2023, 8:52 AM last edited by girish Apr 27, 2023, 9:28 AM
@girish yes, I confirm that on mac only safari has this issue, on iOS it is all browsers (maybe because they have to go through the app store?)
hmm, sure, technically I shouldn't share it but since it is for its own sake:
again, I think we were close already with the CORS, because tiktok tries to reach to the website from the iframe. is there a way that I can explicitly allow it to see what happens?
-
@squareclouds I removed that link, why cause concerns. You can send us the link to support@cloudron.io . As for CORS, I have already tested this part. It's not CORS related. Something to do with content blocking in safari or maybe some other configuration on nginx.
-
AFAIK autoplay is stopped on all browsers by default nowadays - probably because it is annoying as hell.
OptimizePress has a good approach to this:
- https://www.optimizepress.com/
- https://docs.optimizepress.com/article/2759-video-autoplay-not-working/
- https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
TikTok is also going to get blocked my anyone using any adblockers or tracking blocking settings in their browsers. For that you'll need an adblock banner, too:
Ad unblock banners are also annoying, but if you have no choice but to use TikTok (which morally I wouldn't touch it, but maybe you have to just get the job done, pay billz, and move on from this client)
-
@marcusquinn thank you, its noted. firstly it would be more important to get make it behave like on all other browsers and servers. if the user decides to block by their own will is another story
-
@squareclouds Can you download the video and just embed a .mp4 file?
I don't know what advantage TikTok embeds would have, would seem like more downsides to me, both in your cost of trying to make it work, and user privacy.
Don't know if YouTube is any better, but that might give you a way to compare if you think this is a Cloudron setup issue, or just an issue with the way browsers work with what you're trying to do.
-
@girish I sent you the email yesterday, thank you for looking into this!
-
@marcusquinn not doable, I need the server to work with tiktok by its own. its not 1 video, any user can embed a tiktok, so potentially its hundreds. we also have spotify, youtube, vimeo, twitter, soundcloud and instagram embeds, all working fine. all simple things have already been tested and compared, thats why i am here. at some point I didnt know what to test anymore
-
-
timconsidine App Devreplied to squareclouds on Apr 28, 2023, 6:27 AM last edited by timconsidine Apr 28, 2023, 6:27 AM
@squareclouds said in Cloudron+LAMP: Tiktok Embed problems:
thats why i am here. at some point I didnt know what to test anymore
After the extensive amount of discussion in this thread, if you haven't solved it and you still want help from the community, maybe you should share the URL of the site running on Cloudron.
Forum posts get indexed by search engines, so probably share a temporary alias which gets removed later.
Also I think I read you don't have the non-Cloudron site running. If that's correct, may I suggest you get one running again for the point of comparison, and of course share its URL (or rather an alias if needed).
Otherwise people trying to help are just guessing.
-
@squareclouds I replied now. But the site you sent me (which I think you said is hosted externally?) doesn't work either. It has the same errors. Sent you a screenshot.
-
@timconsidine thats why @girish asked me already to send the link to the cloudron support email after i already posted it here and he removed it, since i said technically i am not allowed (signed non-disclosure agreement) to be showing it yet. so for now i will wait for his response and thank you all for your guesses.
-
@girish ah thank you, didnt see it while i was wirting. and sorry i misunderstood your request, i just sent you the other link.
-
Alright, found the problem. By default, we set the
Referrer-Policy
assame-origin
(see also https://forum.cloudron.io/topic/4546/referrer-policy-header-is-overwritten) . On safari alone, having this header makes TikTok videos not play. Changing it tounsafe-url
makes it work.@squareclouds An app can change this header. In the LAMP app, edit the
apache/app.conf
. Add a lineHeader set Referrer-Policy "unsafe-url"
and restart the app. That seems to make it work. Can you confirm?See also:
-
I have to add that maybe
strict-origin-when-cross-origin
is a better value and maybe other values make it work as well. So, might be worth testing what works best for your site. Unfortunately, I lost access to the Mac by now. -
@girish said in Cloudron+LAMP: Tiktok Embed problems:
Header set Referrer-Policy "unsafe-url"
thank you! i am trying it right now from the web terminal but it says app.conf is not writeable.
- i opened the app terminal
- went to app/code/apache
- opened the app.conf with nano
- made the change
- but i cannot save
do i have to stop the app and use ssh?
Bildschirmfoto 2023-04-28 um 11.17.04.png
-
girish Staffreplied to squareclouds on Apr 28, 2023, 10:03 AM last edited by girish Apr 28, 2023, 10:03 AM
@squareclouds said in Cloudron+LAMP: Tiktok Embed problems:
went to app/code/apache
It's in
/app/data/apache
. You can use the Filemanager . Code is always readonly in Cloudron. -
squarecloudsreplied to girish on Apr 28, 2023, 10:16 AM last edited by squareclouds Apr 28, 2023, 10:20 AM
@girish it works with both values!!!! thank you so much for your help and patience, girish! i will leave it as 'strict-origin-when-cross-origin'
Post 24 of 40