Passing Parameters in a Deep Link
It is possible for your MiniApp to receive parameters from the Host App. For example, a deep link to your MiniApp can have query parameters (i.e. ?param=value
) and a fragment (i.e. #someValue
), and then your MiniApp will be able to access those parameters.
In the Link App, your deep link would look like this:
https://one.rakuten.co.jp/miniapp/MINI_APP_ID?yourParam=yourValue&anotherParam=test#yourFragmentValue
Receiving Parameters in your MiniApp
When your MiniApp is launched, the query parameters and fragment will be attached to the URL of the WebView for your MiniApp.
You can access the parameters through the web standard window.location.search
and window.location.hash
. See the following example:
// Retrieve "yourParam" parameter
const param = window.url.searchParams.get(
"yourParam"
)
// Retrieve fragment value
const fragment = window.location.hash
Warning: Your MiniApp is responsible for sanitizing the parameters and ensuring that the parameters are used in a secure way. For example, your MiniApp should not be left vulnerable to cross-site scripting attacks. See OWASP's DOM based XSS Prevention Cheat Sheet and Web Parameter Tampering Guide for more information.
Supported Values
Query parameters and fragments support the standard characters defined in RFC 3986 (URI spec). See the sections on Query and Fragment.
ONLY the following characters are supported:
0
-9
a
-z
A
-Z
? / : @ - . _ ~ ! $ & ' ( ) * + , ; = # [ ]
- MUST NOT contain more than a single
#
character (the#
character is used for delimiting the start of the fragment string) - Android only note: The
'
character will be automatically converted to the percent encoded value%20
by the Chrome WebView on Android devices
- MUST NOT contain more than a single
- percent-encoded characters (
%
followed by two hexadecimal digits)
Note: If any unsupported characters are passed as parameters, then your MiniApp will still launch but it will NOT receive the parameters.
Note: On Android devices, there are some additional characters which can be passed such as spaces, Japanese characters, and other UTF-8 characters. However, these characters will be automatically percent-encoded by the Chrome WebView. Please make sure to manually percent-encode your params (i.e. using encodeURIComponent
) in order to avoid cross-platform issues.