You are viewing a plain text version of this content. The canonical link for it is here.

Posted to issues@cordova.apache.org by "Skyedra (via GitHub)" <gi...@apache.org> on 2023/08/18 03:20:59 UTC

[GitHub] [cordova] Skyedra created a discussion: How to conditionally load cordova on remote pages

GitHub user Skyedra created a discussion: How to conditionally load cordova on remote pages

Hello,

I am trying to make an APK version of my online game due to some user requests.  My intent was to use Cordova to wrap the game pages on the website.

# Background Info / Justification

I am wanting to go down the path of using remote pages because:
1) My app will not be distributed in google play store, so the TOS issue does not affect me
2) I will not be attempting to make an ios build for similar reasons (and also the PWA of the game on safari works ok, whereas chrome has some PWA bugs that are blocking me)
3) I do not wish to have to deploy a new APK version on every web page update
4) There is some logic already written in PHP that would not be easy to replicate into a portable html/js
5) My app does not require any permissions beyond internet access

For the most part, the remote pages route seems to work, however, there are a couple issues in my current implementation that I would like to fix.  To resolve them, I would like to be able to access cordova object on the remote page.  The reasons are:

1) Text entry during fullscreen mode is not great as the system keyboard pops up over the game UI where text is being entered.  The system back button is also hidden due to navigation disabled, so it's not clear to the user how to return to the game.  Ideally, the viewport would adjust which would make this a non-issue, however, in my research it seems the non-adjusting viewport is an android fullscreen/seamless limitation and not the fault of cordova.  So my thought here is that I would experiment with disabling fullscreen mode via AndroidFullScreen on the UI pages that require keyboard entry.

2) Using back button doesn't make much sense in this game, as pressing back would at best send the user back to somewhere they're not expecting, and at worst crash the app.  (Pressing back button on some pages with captcha data entered sends user back to an expired page, thus generating a 'net::ERR_CACHE_MISS' which crashes the whole app.)  Therefore, I would like to use the backbutton event listener to prevent back on pages it does not make sense to go back.  I believe this requires cordova.js loaded

I have seen that previously, the method to accomplish this was via `cdvfile` but this appears to be [going away / doesn't work properly](https://github.com/apache/cordova-plugin-file/issues/347#issuecomment-1357111022).  

# Question

So, that is a long way to ask, **what is the best way to gain access to cordova from a remote page**, that also doesn't break non-cordova clients?  (IE, using regular web browser shouldn't try to load cordova.js)

Thank you,
-- Skye

GitHub link: https://github.com/apache/cordova/discussions/427

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] Skyedra added a comment to the discussion: How to conditionally load cordova on remote pages

Posted by "Skyedra (via GitHub)" <gi...@apache.org>.

GitHub user Skyedra added a comment to the discussion: How to conditionally load cordova on remote pages

Thank you, regarding loading:

I am currently loading pages via a https:// website instead of only in the included files.  IE allowing remote pages via this `config.xml` directive:
```
<allow-navigation href="https://example.com/game/*" />
```
And then my index.html redirecting to `https://example.com/game/example.php`

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6766830

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] breautek added a comment to the discussion: How to conditionally load cordova on remote pages

Posted by "breautek (via GitHub)" <gi...@apache.org>.

GitHub user breautek added a comment to the discussion: How to conditionally load cordova on remote pages

> However, I am open to alternative ideas, especially if there is a potential security concern that might arise unexpectedly if one day some other third party script needs to be added, etc long after the apk is deployed.

Yah, I can't really answer on the acceptable risk. Generally speaking if you have "untrusted" content being loaded in and they have access to the cordova js APIs, consider your app exploitable. You may say the only third-party content is google and you trust google or whatever.

In-app-browsers eliminates the concern because it runs in it's own webview without the native hooks to call on the native code. I do believe it has a messaging API so that you can post and receive messages between webviews, therefore you could create any kind of mapping where it makes sense without actually exposing the cordova API. But I never actually used the plugin myself so I'm not really familiar with it. But yes, the typical path is to use the in-app-browser for untrusted content. To be clear, normally when the term `untrusted content` is used, it's referring to content that isn't bundled inside the app binary.

On the typescript issue, what I do in my apps is I install `@types/cordova`, which can be installed a devDependency. Then you can update your `tsconfig.json` to include the file in the `files` directive:

It may look something like:

```
{
...
"files": [
"./node_modules/@types/cordova/index.d.ts"
]
}
```

`files` can be used in addition to your `include`/`exclude` directives as well. So while `node_modules` is generally excluded, I can use `files` to import specific files where it makes sense.

Normally this isn't necessary since normally you would just import the module and the typings will be loaded via the import, but given that cordova is actually more of a global that is just loaded in the environment, this configuration makes the cordova types implicitly available across your project, which matches reality.

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6768953

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] breautek added a comment to the discussion: How to conditionally load cordova on remote pages

Posted by "breautek (via GitHub)" <gi...@apache.org>.

GitHub user breautek added a comment to the discussion: How to conditionally load cordova on remote pages

> So, that is a long way to ask, what is the best way to gain access to cordova from a remote page, that also doesn't break non-cordova clients? (IE, using regular web browser shouldn't try to load cordova.js)

I'd probably use the config to append a user agent via `AppendUserAgent` preference to your webview. In your web app, you can check the user agent for your string to determine if you're in a cordova app. Then you should be able to load in the `cordova.js` file that would be embedded in the app.

I know you stated that you're not uploading to the google play store or the iOS app store, and thus don't care about the terms of service issues, but do understand that this is still exposing a vulnerability. If you have any embedded JS code, including code inside iframes and/or third-party code, it can gain access to the cordova environment and APIs. APIs will be mostly restricted to the plugins you have installed, but it can gain access to much more than what it is intended.

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6763547

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] breautek edited a comment on the discussion: How to conditionally load cordova on remote pages

Posted by "breautek (via GitHub)" <gi...@apache.org>.

GitHub user breautek edited a comment on the discussion: How to conditionally load cordova on remote pages

It may look something like:

```
{
...
"files": [
"./node_modules/@types/cordova/index.d.ts"
]
}
```

`files` can be used in addition to your `include`/`exclude` directives as well. So while `node_modules` is generally excluded, I can use `files` to import specific files where it makes sense.

Also I'm not sure if that path is 100% correct, I'm going off memory. You may have to peek into the directory to see where exactly `index.d.ts` is.

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6768953

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] Skyedra added a comment to the discussion: How to conditionally load cordova on remote pages

Posted by "Skyedra (via GitHub)" <gi...@apache.org>.

GitHub user Skyedra added a comment to the discussion: How to conditionally load cordova on remote pages

Thank you,

The user agent strategy sounds like a good one for the conditional include.   I had two further questions along these lines:

### Remote Include

Do you have any guidance for how to do the local include in typescript?  When I do this:

```
import("cordova");
```
Typescript compiler complains it can't resolve cordova:

```
Module not found: Error: Can't resolve 'cordova' in '/path-redacted/client-src'
```

Which makes sense, because cordova.js would be existing in the app files, which typescript doesn't have access to in remote web's development files.

I also tried pulling in the [@types/cordova package](https://www.npmjs.com/package/@types/cordova) which seems like I should be able to load like this

```
import { Cordova } from "cordova";
```

but it doesn't like to do that conditionally:

```
Module parse failed: 'import' and 'export' may only appear at the top level (1320:4)
```

So, not quite sure how to make typescript happy in this scenario.

### Security / Alternate Method

Regarding this, I have two thoughts.

First, this is good to call out.  I perceive the risk as fairly low, though you may be aware of exploits that I am not.  The only third party script / remote include I use is google analytics, and APK permissions are minimal.  It is not possible for users to upload JS to the game, and especially not in the whitelisted paths.  There are also no iframes, so no concerns over third party ads injecting code.

However, I am open to alternative ideas, especially if there is a potential security concern that might arise unexpectedly if one day some other third party script needs to be added, etc long after the apk is deployed.  

Is the typical path for this to use [Inappbrowser](https://cordova.apache.org/docs/en/11.x/reference/cordova-plugin-inappbrowser/index.html) and do some communications layer proxying to pass the relevant requests?  IE:

```
cordova-plugin-fullscreen-cutout               index.js              inappbrowser           remote game website ts
AndroidFullScreen.immersiveMode() <-- handleCustomSetFullScreen()  <--- -- ?? <----------    customSetFullScreen()
```
Where `??` might be `InAppBrowser.addEventListener` listening for `message` event sent by [postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)?		

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6766810

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org

[GitHub] [cordova] BigBalli added a comment to the discussion: How to conditionally load cordova on remote pages

Posted by "BigBalli (via GitHub)" <gi...@apache.org>.

GitHub user BigBalli added a comment to the discussion: How to conditionally load cordova on remote pages

- instead of inlining cordova.js script tag, first check if the browser is not "regular".
- what do you mean by remote pages? how are you loading them?

GitHub link: https://github.com/apache/cordova/discussions/427#discussioncomment-6763434

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org