I am making an universal app using react-native and react-native-web. My graphql endpoint is open to public. I know CORS/CSRF do not apply to mobile apps. But I also run the same app on the browser using react-native-web. So I need to prevent other malicious websites to manipulate my users' requests on their browsers.
I am also using websocket. It seems like csrf token is not used for websocket connections. (https://stackoverflow.com/questions/53176767/cross-site-request-forgery-protection-with-django-and-websockets)
So I need to restrict origins from the server side. Django Channels offers the way to restrict the origin to only my website.(https://channels.readthedocs.io/en/latest/topics/security.html) It is like this:
However, here is the problem. I also have my mobile apps and they do not even have an origin header. (https://stackoverflow.com/questions/51232869/no-request-header-origin-when-using-expo-to-express-server)
How can I restrict origin headers sent from browsers and allow my mobile apps to communicate at the same time?
What is the best practice of CSRF/CORS for universal apps?