I'm trying to implement the google reCAPTCHA in my react native app. I'm using a wrapped webview.
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{height: 200}}
source={{
html: this.getWebviewContent()
}}/>
getWebviewContent(){
var originalForm = '<!DOCTYPE html><html><head><script src=".js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<My key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:3000/v1/video")
.replace("[TITLE]", this.state.form.title)
.replace("[DESCRIPTION]", this.state.form.description)
.replace("[URL]", this.state.form.url);
return tmp;
}
If I render it, it gives me the following error:
I have a theory that it doesn't want to cooperate since I'm running it as a "file" in the WebView and that you cannot add files as part of the domain in the Google dashboard.
Is there any way of either added file:// permissions in the reCAPTCHA dashboard of Google or any way of faking a domain, so that I can add that faked domain in the dashboard. Or am I pletely lost and the issue is something else?
I'm trying to implement the google reCAPTCHA in my react native app. I'm using a wrapped webview.
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{height: 200}}
source={{
html: this.getWebviewContent()
}}/>
getWebviewContent(){
var originalForm = '<!DOCTYPE html><html><head><script src="https://www.google./recaptcha/api.js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<My key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:3000/v1/video")
.replace("[TITLE]", this.state.form.title)
.replace("[DESCRIPTION]", this.state.form.description)
.replace("[URL]", this.state.form.url);
return tmp;
}
If I render it, it gives me the following error:
I have a theory that it doesn't want to cooperate since I'm running it as a "file" in the WebView and that you cannot add files as part of the domain in the Google dashboard.
Is there any way of either added file:// permissions in the reCAPTCHA dashboard of Google or any way of faking a domain, so that I can add that faked domain in the dashboard. Or am I pletely lost and the issue is something else?
-
Does it work if you set a domain with baseUrl?
<WebView source={{ html: this.getWebviewContent(), baseUrl: 'http://your-domain.' }}– mihai1990 Commented Sep 1, 2017 at 11:03 - Yes, that does work! Thanks a lot for your feedback. If you write a example solution I can set it as the accepted answer. – Victor Axelsson Commented Sep 4, 2017 at 6:18
1 Answer
Reset to default 4You can set a domain for your WebView by setting baseUrl in source prop:
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{height: 200}}
source={{
html: this.getWebviewContent(),
baseUrl: 'http://your-domain.' // <-- SET YOUR DOMAIN HERE
}}/>
getWebviewContent(){
var originalForm = '<!DOCTYPE html><html><head><script src="https://www.google./recaptcha/api.js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<My key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:3000/v1/video")
.replace("[TITLE]", this.state.form.title)
.replace("[DESCRIPTION]", this.state.form.description)
.replace("[URL]", this.state.form.url);
return tmp;
}