Uncaught SecurityError: Blocked a frame with origin "https://api.razorpay.com"

[githubmss]

First of all thanks for such a wonderful plugin , you make us work really easier , Please give my regards to your development team .. you guys really did a great work !!!! Basically I am using rzp-cordova-example in my application , everything is fine , i successfully able to integrate in my application as per your instructions

Free recharge is working fine but i am getting one Security error with other options , here is the error i am getting :

Uncaught SecurityError: Blocked a frame with origin "https://api.razorpay.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

Is the above error related to my KEY , please let me know how to resolve it.

After Adding meta tags in index.html above error removes but now i am getting this following error when i try to pay through NetBanking

MetaTags i used are as follows :

<meta http-equiv="Content-Security-Policy"
	content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Error which i am getting now is :

Uncaught DOMException: Blocked a frame with origin "https://api.razorpay.com" from accessing a cross-origin frame.
at Yt.write (https://checkout.razorpay.com/v1/checkout-frame.js:2:6651)
at ne.writePopup (https://checkout.razorpay.com/v1/checkout-frame.js:2:15193)
at ne.generate (https://checkout.razorpay.com/v1/checkout-frame.js:2:13826)
at ne (https://checkout.razorpay.com/v1/checkout-frame.js:1:7779)
at window.Razorpay.ti.createPayment (https://checkout.razorpay.com/v1/checkout-frame.js:2:16038)
at Ge.submit (https://checkout.razorpay.com/v1/checkout-frame.js:3:27388)
at Ge.preSubmit (https://checkout.razorpay.com/v1/checkout-frame.js:3:26538)
at HTMLFormElement.e (https://checkout.razorpay.com/v1/checkout-frame.js:1:19306)

Please let me now , what causing me this problem though i am searching on google too about it.

Appreciate!!!!!

[akshaybhalotia]

Hi @githubmss , this is due to incorrect CSP. Please check this section for details: https://github.com/razorpay/razorpay-cordova#things-to-be-taken-care

[githubmss]

Hello @akshaybhalotia , thanks for your reply but if i use the CSP provided there in above link then my app stops working it start giving me error at very beginning and hangs on splash.

Here is the error i was getting when i added bellow meta tags in index.html :-

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*.razorpay.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Error i got at that moment is :-

Refused to load the script 'https://maps.googleapis.com/maps/api/js?&sensor=true' because it violates the following Content Security Policy directive: "default-src 'self' https://*.razorpay.com data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

index.html:1 Refused to load the script 'https://code.jquery.com/jquery-3.1.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' https://*.razorpay.com data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to connect to 'https://www.handikart.co.in/restapi/token/getConfiguration' because it violates the document's Content Security Policy.
at ionic.bundle.js:18049
at sendReq (ionic.bundle.js:17911)
at serverRequest (ionic.bundle.js:17627)
at processQueue (ionic.bundle.js:21472)
at ionic.bundle.js:21488
at Scope.$eval (ionic.bundle.js:22684)
at Scope.$digest (ionic.bundle.js:22500)
at Scope.$apply (ionic.bundle.js:22789)
at done (ionic.bundle.js:17942)
at completeRequest (ionic.bundle.js:18132)

And when i remove .razorpay.com from above meta tag i.e when i add

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://* data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

then i got bellow stated error :-

Uncaught SecurityError: Blocked a frame with origin "https://api.razorpay.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

[akshaybhalotia]

@githubmss That was just a sample of how the CSP should look like. You can add other domains too in the same tag (the ones which are failing for you).

[githubmss]

i tried with this :-

<meta http-equiv="Content-Security-Policy"
 	content="default-src 'self'  https://www.razorpay.com https://www.handikart.co.in/ https://maps.googleapis.com https://code.jquery.com ;  data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

but still not working

[akshaybhalotia]

Try changing to

<meta http-equiv="Content-Security-Policy" content="default-src 'self'  https://*.razorpay.com https://www.handikart.co.in/ https://maps.googleapis.com https://code.jquery.com ;  data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

[githubmss]

Sorry , but still getting same error :-

Uncaught SecurityError: Blocked a frame with origin "https://api.razorpay.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

[pronav]

Hi @githubmss, I believe the reason behind this error is incorrect installation of cordova plugin. You're probably using checkout.js directly by inserting script tag to show checkout-form, instead you should install razorpay-cordova plugin correctly.

[githubmss]

i just uninstall the plugin and reinstall it

currently installed Plugin :- com.razorpay.cordova 0.11.0 "RazorpayCheckout"

Here is the plugin i am using :-

cordova plugin add https://github.com/razorpay/razorpay-cordova.git

Now i start getting error in Main.java class

it's saying PaymentResultWithDataListener can not be resolved so do i need to add any Library or jar in my project ?

After reinstall the plugin version has been updated to 0.14.0 :-

com.razorpay.cordova 0.14.0 "RazorpayCheckout"

[akshaybhalotia]

Create a new sample project for yourself (like cordova init your-project-folder) and then follow usage instructions here: https://github.com/razorpay/razorpay-cordova#usage. Then do cordova run android or cordova run ios.

Please let us know if this works for you.

[githubmss]

@akshaybhalotia , I am sorry i am pinging you again and again , but i have to resolve this problem , actually even I downloaded your sample project for git and was getting same error , now as per your instruction i created new project and installed cordova plugin add com.razorpay.cordova --save plugin , I again start getting same error , as it seems it do require some jar file.

Steps i followed are :-

Ionic start RazorPaySample
cd RazorPaySample
ionic platform add android 
 then at last i added the plugin :- 
cordova plugin add com.razorpay.cordova --save

My ionic version is :- 1.7.14
My Cordova version is :-  6.5.0

Java version :-

java version "1.7.0_80"
Java(TM) SE Runtime Environment (build 1.7.0_80-b15)
Java HotSpot(TM) 64-Bit Server VM (build 24.80-b11, mixed mode)

I found this link :-

https://docs.razorpay.com/page/android-sdk-v013x

it's razorpay-android.jar of version 0.13.0 By placing this inside my lib folder i am able to solve the two import file issues that are of :-

import com.razorpay.CheckoutActivity;
import com.razorpay.Checkout;

But still getting Import issue for :-

import com.razorpay.PaymentResultWithDataListener;
import com.razorpay.PaymentData;

[githubmss]

Thanks For your Support team

Finally , It start working , the problem is plugin is outdated for eclipse , so i import the project in android studio and every thing starts working fine.

Valuable Solution by Miroojin Bakshi :-
The Android plugin for Eclipse is outdated and will not work for gradle based projects. That is the reason you are getting import errors in Main.java. You should be using Android Studio as an IDE for the android part of your cordova project.