In one of my project I am using Nginx server to host my apps and recently add Content Security Policy to skip inline CSS, in file CSS and JS script. I write the following code in my Nginx configuration:
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; media-src 'self'; form-action 'self'; frame-ancestors 'self';" always;
What is the problem?
In the login page, after successfully login, I redirect the user in the OTP entry page and send an OTP to the user mobile using SMS. When there is an OTP in SMS I notice the OTP code is suggested in the center of the top row of the keyboard (some sort of auto clipboard), normally if we select the OTP code, it typed in the relevant input field. But in this case it reloads the page rather copy-paste the code.
When I manually copy and paste the code on that time there is no reload. Just when trying to paste the code while there is an SMS and the keyboard shows the code to paste.
This is working fine in Windows PC browser, Linux browser, Android OS browser, even other browsers in iOS, but the problem raise when I tried to use the app in Safari browser.
If I disable the Content Security Policy then there is no issue with Safari.
Does anyone help me to figure out what maybe the root cause that trigger Safari browser to force a webpage to reload while trying to paste a code from Clipboard?
- Thanks