Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.


Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Bookmarks
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

Cloudron Forum

Apps | Demo | Docs | Install
  1. Cloudron Forum
  2. LAMP
  3. Cloudron+LAMP: Tiktok Embed problems

Cloudron+LAMP: Tiktok Embed problems

Scheduled Pinned Locked Moved LAMP
40 Posts 8 Posters 3.8k Views 8 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S squareclouds

      thanks for the first replies

      @warg

      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.3

      php version (of the actual server we are using):
      8.1.17

      as i wrote before, it only happens on macOS Safari and all iOS browsers (safari, chrome, firefox, edge, all of them 😕 )

      @timconsidine

      cloudron + lamp php:
      8.1.17

      virtual 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 packages

      localhost:
      my MAMP uses 8.1.13, here everything works as well

      girishG Offline
      girishG Offline
      girish
      Staff
      wrote on last edited by
      #5

      @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?

      S 1 Reply Last reply
      0
      • girishG girish moved this topic from Support on
      • girishG girish

        @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?

        S Offline
        S Offline
        squareclouds
        wrote on last edited by
        #6

        @girish

        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.

        girishG 1 Reply Last reply
        0
        • S squareclouds

          @girish

          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.

          girishG Offline
          girishG Offline
          girish
          Staff
          wrote on last edited by
          #7

          @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?

          S 1 Reply Last reply
          0
          • girishG girish

            @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?

            S Offline
            S Offline
            squareclouds
            wrote on last edited by
            #8

            @girish good point! i just tried it, yes, it does not work. this link i can share with you

            https://html.scd-app.de

            nebulonN girishG 2 Replies Last reply
            0
            • S squareclouds

              @girish good point! i just tried it, yes, it does not work. this link i can share with you

              https://html.scd-app.de

              nebulonN Offline
              nebulonN Offline
              nebulon
              Staff
              wrote on last edited by
              #9

              @squareclouds seems to work for me here:

              63b1acbd-bba2-42fb-94b1-220bce0881ff-image.png

              Do you maybe have some privacy plugins installed in your browser which might interfere here?

              1 Reply Last reply
              0
              • S squareclouds

                @girish good point! i just tried it, yes, it does not work. this link i can share with you

                https://html.scd-app.de

                girishG Offline
                girishG Offline
                girish
                Staff
                wrote on last edited by
                #10

                @squareclouds loads for me too on Chrome/Linux.

                ccc33d62-9d95-41de-9a73-4d8ed9b1e18a-image.png

                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?

                S 1 Reply Last reply
                0
                • girishG girish

                  @squareclouds loads for me too on Chrome/Linux.

                  ccc33d62-9d95-41de-9a73-4d8ed9b1e18a-image.png

                  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?

                  S Offline
                  S Offline
                  squareclouds
                  wrote on last edited by
                  #11

                  @girish @nebulon

                  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.

                  nebulonN 1 Reply Last reply
                  0
                  • S squareclouds

                    @girish @nebulon

                    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.

                    nebulonN Offline
                    nebulonN Offline
                    nebulon
                    Staff
                    wrote on last edited by
                    #12

                    @squareclouds I don't have access to any apple devices to test and debug this on my own.

                    S 1 Reply Last reply
                    0
                    • nebulonN nebulon

                      @squareclouds I don't have access to any apple devices to test and debug this on my own.

                      S Offline
                      S Offline
                      squareclouds
                      wrote on last edited by
                      #13

                      @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.

                      nebulonN 1 Reply Last reply
                      0
                      • S squareclouds

                        @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.

                        nebulonN Offline
                        nebulonN Offline
                        nebulon
                        Staff
                        wrote on last edited by
                        #14

                        @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

                        S 1 Reply Last reply
                        0
                        • nebulonN nebulon

                          @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

                          S Offline
                          S Offline
                          squareclouds
                          wrote on last edited by
                          #15

                          @nebulon

                          @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?

                          nebulonN 1 Reply Last reply
                          0
                          • S squareclouds

                            @nebulon

                            @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?

                            nebulonN Offline
                            nebulonN Offline
                            nebulon
                            Staff
                            wrote on last edited by
                            #16

                            @squareclouds I don't think tiktok will call your server, anyways there is no service besides apache running to call into.

                            girishG 1 Reply Last reply
                            0
                            • nebulonN nebulon

                              @squareclouds I don't think tiktok will call your server, anyways there is no service besides apache running to call into.

                              girishG Offline
                              girishG Offline
                              girish
                              Staff
                              wrote on last edited by
                              #17

                              @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.

                              S 1 Reply Last reply
                              0
                              • girishG girish

                                @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.

                                S Offline
                                S Offline
                                squareclouds
                                wrote on last edited by
                                #18

                                @girish thank you dear sir. yes, its strange ^^ crossing fingers that you find out something when you have the chance.

                                girishG 1 Reply Last reply
                                0
                                • S squareclouds

                                  @girish thank you dear sir. yes, its strange ^^ crossing fingers that you find out something when you have the chance.

                                  girishG Offline
                                  girishG Offline
                                  girish
                                  Staff
                                  wrote on last edited by girish
                                  #19

                                  @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?

                                  S 1 Reply Last reply
                                  0
                                  • girishG girish

                                    @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?

                                    S Offline
                                    S Offline
                                    squareclouds
                                    wrote on last edited by
                                    #20

                                    @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).

                                    jaschaezraJ girishG 2 Replies Last reply
                                    0
                                    • S squareclouds

                                      @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).

                                      jaschaezraJ Offline
                                      jaschaezraJ Offline
                                      jaschaezra
                                      wrote on last edited by
                                      #21

                                      @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)

                                      girishG 1 Reply Last reply
                                      0
                                      • jaschaezraJ jaschaezra

                                        @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)

                                        girishG Offline
                                        girishG Offline
                                        girish
                                        Staff
                                        wrote on last edited by
                                        #22

                                        @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.

                                        S 1 Reply Last reply
                                        0
                                        • S squareclouds

                                          @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).

                                          girishG Offline
                                          girishG Offline
                                          girish
                                          Staff
                                          wrote on last edited by
                                          #23

                                          @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.

                                          1 Reply Last reply
                                          0
                                          • girishG girish

                                            @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.

                                            S Offline
                                            S Offline
                                            squareclouds
                                            wrote on last edited by girish
                                            #24

                                            @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?

                                            girishG 1 Reply Last reply
                                            0
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes


                                              • Login

                                              • Don't have an account? Register

                                              • Login or register to search.
                                              • First post
                                                Last post
                                              0
                                              • Categories
                                              • Recent
                                              • Tags
                                              • Popular
                                              • Bookmarks
                                              • Search