I've built a website for an e-sports team using React. One of the pages embeds twitch videos. I used the documentation and was able to get the embedded videos to work on localhost. In the beginning I struggled with it, but then I found out that I need to add the "parent" website url in the embed, as per the docs:
<iframe
src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com" // <-- this here
height="<height>"
width="<width>"
allowfullscreen="<allowfullscreen>">
</iframe>
But now that I deployed it on github pages to demo it to the team, I'm getting an error.
"Whoops! This embed is misconfigured.
(Developers: Please check your browser console for more information)"
I'm using react-router with Hash routing so that react router works with GH pages.
This is the offending code:
<iframe class="media_display" title="videoPlayer2" src={"https://player.twitch.tv/?channel=" + twitchStreamers[currentStreamer] + "&parent=merryface.github.io/niwi-website/"} frameborder="0" allowfullscreen="true" />
I have a suspicion that I have an issue with the parent attribute, since this worked perfectly fine before deploying it on GH pages, but after a lot of experimentation, I'm a bit at a loss. could someone please help?
Relevant twitch docs:
https://dev.twitch.tv/docs/embed/video-and-clips/
Website Page with error:
https://merryface.github.io/niwi-website/#/videos
Turns out Hash Router for react-router + trying going back to the basic url of the repo's website sorted the issue
Related
I made a Tauri Hello world app, using react-ts, and that contained logos for Tauri, Vite, and React, that are clickable of course, it uses an a HTML tag like <a href="https://vitejs.dev" target="_blank">, which if I click on it, opens a new tab in my default browser that loads that URL.
So naturally, I wanted to test if Tauri apps would open that link (or any other remote URL actually) inside the app's webview, so I changed that to <a href="https://vitejs.dev"> which did just that.
What I want to know is: how to configure any Tauri app to not open / load any URLs unless I specifically allow it to?
What I tried already:
I tried changing the CSP option in the tauri.conf.json file to none to not allow any remote scripts or ....
"security": {
"csp": {
"default-src": ["'none'"]
}
},
I also tried searching for some kind of allowed-navigation option that someone talked about
I also started looking into a before-navigate hook in the main.rs file but i don't know how to implement it
I would really appreciate it if you explain how to reach my objective, and I would be even more indebted to you if you can give me same better options or the ones more appropriate for a production ready app.
Regards,
zk.
I'm using Google Sign-In JavaScript client for months without problem.
But recently when user tapping on sign in button from webapp that added to homescreen, the signin pop-up just hang without showing any content.
When debugged via remote debugging, an error is displayed in console pane:
Uncaught Failed to get parent origin from URL hash!
originated from 4188232449-v2-idpiframe.js:136 (javascript loaded internally by google library).
I'm sure it's not programming/config error since the same webapp was previously working for months without problem, and I haven't modified any code.
I've tried google search for this particular problem and browse Google documentation for any recent changes in Google Sign-In API without any luck.
Is it bug from Google API Javascript client library, glitch from recent Chrome browser update on Android, or there is some changes in API usage that I doesn't yet aware?
Library used is https://apis.google.com/js/platform.js
This is init param for gapi.auth2.init():
{
client_id: GAPI_CID, // defined as constant
cookiepolicy: 'single_host_origin',
prompt: 'select_account',
ux_mode: 'popup',
fetch_basic_profile: true
}
Any insight will be much appreciated. Thank you.
P.S.: This problem is different with Uncaught Failed to get parent origin from URL hash since on that case the problem is caused by misconfiguration of required credential in Google API console.
If you never had succedded in integrating sign-in flow with your app, perhaps answer from that post can help you.
Otherwise, if you have had successfully integrated sign-in flow for some time but recently problem suddenly/erratically appears with symptom of blank screen on popped-up window, than you have same problem with me.
I can confirm we are experiencing the same problems at my company since recently. It seems a bit erratic, not 100% of the time. But for some users, some time, they are met with an empty sign-in popup with the url pointing to "https://accounts.google.com/o/oauth2/iframe" but nothing happens.
Not a complete answer yet, but this may be a reasonable workaround for some. I updated the ux_mode to use redirect and it is partially working now.
auth2 = gapi.auth2.init({
client_id: '1234.apps.googleusercontent.com',
scope: 'profile email',
ux_mode: 'redirect',
redirect_uri: 'https://blahblah.io/oauth2callback'
})
NOTE: it seems redirect_uri is required, contrary to Google's docs. This isn't a perfect drop-in replacement, but it solves the "URL hash!" error
This blog post and the Git Repo in it could also be helpful for anyone attempting to use redirect
My electron app started to fail today for the same reason. Been debugging quite a lot and I think found the reason, but don't know how to solve it, why it happened, or if it is electron or google's fault.
In my electron app, I have 2 webviews, one for the main content and another one for google popup dialogs.
So when google needs to open the authentication, it generates this IFRAME:
<iframe id="ssIFrame_google"
sandbox="allow-scripts allow-same-origin" aria-hidden="true"
src="https://accounts.google.com/o/oauth2/iframe#origin=https%3A%2F%2Fxxxx.com&rpcToken=dxxd318480305.4777704"
style="... display: none;"></iframe>
Mind that the URL has HASH parameters: your origin and the token.
However, when on the electron side I capture the new-window event in order to open the URL myself in another webview, the event I receive LACKS the hash parameters:
event {
type : "new-window",
url:"https://accounts.google.com/o/oauth2/iframe",
.
.
}
So what google's iframe is complaining about (I debugged it) is exactly that it can't find the origin and rpctoken parameters that should be in the hash parameters.
For a reason I don't understand (I haven't updated electron) the new-window event does not receive the full url anymore.
Using #howMuchCheeseIsTooMuchCheese answer below I have changed the flow to use the redirect callback, then capture that callback myself and restart the application. It is not ideal, but at least I can login into my applications.
I have installed wordpress in htdocs / store folder
All the styles and scripts loads from localhost/store/.. location
where in my localhost works with 81 port: localhost:81/store
This is strange when I activate particular theme, this issue happens other default theme works fine.
Please refer to screenshot attached.
What I tried so far:
Checked the database for site and Url, all are fine.
Appearance > general > Home url and site url is also accurate to localhost:81/.
NOTE: my other localhost wordpress websites works fine, theme I bought may have issue. Im tired of finding solution
You need to add the port to the Wordpress Address and Site Address in Dashboard -> Settings -> General.
Source: http://jumptuck.com/2009/01/09/wordpress-on-non-standard-port-not-port-80/
Are you sure the site url in wordpress general settings are right?
if yes try to change site url in wp-config.php
define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');
https://codex.wordpress.org/Changing_The_Site_URL
I've been working on a project where I need to embed Soundcloud songs. Everything works if I try to open the page in Chrome, but in Firefox, it simply shows a gray box with the Soundcloud logo in the center.
I was trying to debug it, and here's what I see in Firebug. When I open the page, it says
TypeError: this.getFlashPlugin(...).match(...) is null
and
Error: Permission denied to access property "href"
I've been searching for it since 2 days now, and I almost came to a conclusion that this can not be fixed, no matter what, then suddenly, a jsfiddle url came up in the search result and I saw soundcloud embeds working fine in both Firefox and Chrome.
Now, here's the original jsfiddle url: http://fiddle.jshell.net/Peeters_William/kpkdnrts/
What I did, was copying the exact same code, including the HTML and Javascript part to a NEW jsfiddle document which can be found here: https://jsfiddle.net/etLwq8kv/
I'm literally clueless: Why is the first fiddle working without any problems and this second one refuses to embed the songs? I believe that I have the exact same copy of the first code and still, it refuses to display..
I have even changed all the settings I saw on the first fiddle such as
CSS panel -> Normalized CSS
HTML panel -> Doctype: HTML5, Body tag:
Javascript panel -> Language: Javascript, Frameworks: No-Libary (pure JS), Load type: onLoad
Still, even if I believe that the two fiddles are the exact copies, why is this second one refusing to work properly?
Thanks in advance and have a great day everyone!
After checking the network for some clues, it became apparent to me that the script wasn't being loaded at all. I started double checking everything and I noticed that the url from the working example did differ from yours not only by the url (https://jsfiddle.net and http://fiddle.jshell.net) but also by the protocol.
In the working example, the protocol was HTTP and so was the Soundcloud's API. However, your example was in a secured connection and the API's address wasn't. Which explains the "Permission denied to access property href message."
Fortunately, Soundcloud provides a secured version of the API. I fixed your example by changing the protocol to HTTPS and it started working.
Change HTTP protocol
http://connect.soundcloud.com/sdk.js
to HTTPS
https://connect.soundcloud.com/sdk.js
I'm writing a live TV application using Flowplayer 6.0.5.
I'm using the following code:
<div class="player">
<video>
<source type="application/x-mpegurl" src="http://10.10.11.101/response2/index.m3u8?ch=<?php echo $_SESSION['chnId']; ?>&request=playlist&session=<?php echo $sess_id; ?>">
</video>
</div>
var playero = $('.player').flowplayer({
autoplay: true
});
It's working fine during livestream, but when I switch channels or use seek I occasionally (about once in 10 times absolutely randomly) get this error:
When switching channels (same when using seek), I just send the request to server to change the playlist and then use
player.load();
I have searched everywhere but couldn't find why could this be happening.
Any help will be appreaciated, thanks!
Believe it or not, I suspect the issue is your app being mistaken for some Flash adverts provider.
Browsers don't think "Oh FlowPlayer? That one's okay", all they know is an SWF file embedded on the page is constantly loading various unique streams (like rotating a playlist of video adverts? Oh oh).
This now makes your app show same behaviour as those annoying Flash banners.
It is then auto-blocked (like all Flash banner ads are nowadays) until user chooses to enable playback.
I'm confused by seeking though. network activity did not show new requests but yet for you it gets blocked after a while? I tested this FlowPlayer link.
All I know is these things below will avoid auto block...
If the SWF is loaded from same server as .html that embeds, thats fine.
If the SWF is loading videos from same server as itself, thats fine.
If the SWF is loading a single video source, that's fine.
You're likely doing the first thing but it's not possible to do the second one since video is from RTMP server.
For yourself : Can PHP be used here as a "middle man" proxy? Basically for RTMP streaming, point your SWF input URL to the PHP file (so technically its always loading one file) but the PHP should Echo back any changed RTMP stream data (channel or seeked).
Please update your flowplayer version from your flowplayer account page, because there are some fixes made in your version(6.0.5). You can review that fixes.