I am trying to open an app. Its working fine when I give a static URL. But as I create a dynamic href tag in *ngFor I can see unsafe keyword is added before the URL and it's not working.
I am running on Angular 6. And getting the Id in a service. In ngFor I am looping the result and creating a link with Id to open the app. I create a pipe but it's still not working.
Safe Pipe
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({
name: 'safeurl'
})
export class SafeurlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(value: any) {
return this.domSanitizer.bypassSecurityTrustUrl(value);
}
}
In the component I added the below line between ngFor tag
Join
You need to use your pipe within interpolation. With your way it's just a string (part of href). It means, angular does not recognize it as a pipe or part of your application. Also, you need to bind the value itself only and nothing else. In your case you can pass appName://joinTournament?id= as a parameter to the pipe.
Here is a working solution.
Add another parameter to your pipe as follows
transform(value: any, prefix = '') {
return this.domSanitizer.bypassSecurityTrustUrl(prefix + value);
}
And change
Join
to
<a [href]="t.tag | safeurl: 'appName://joinTournament?id='">Join</a>
Related
I have an Angular (v10) WebApp, which handles the X-CSRF-TOKEN cookie correctly as explained in the Angular Guide by using the HttpClientXsrfModule in my imports, i.e.:
// app.module.ts
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN',
}),
and by setting an relative Path in my services' requests, like:
// some service.ts
public deleteX(x_id: number): Observable<any> {
return this.httpClient.delete(`api/X/${x_id}`);
}
and now, the browser itself handles fetching the token from the server and sending it by each subsequent POST/DELETE/PUT/PATCH request successfully.
However, if I compile the application now to an Android app using cordova, the app sends a request (with x_id=1068) to file:///android_asset/www/api/X/1068.
I can modify my http services to use platform-specific absolute/relative paths easily, such as:
// some service.ts
public deleteX(x_id: number): Observable<any> {
if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
return this.httpClient.delete(`${environment.baseUrl}/api/X/${x_id}`);
} else {
return this.httpClient.delete(`api/X/${x_id}`);
}
}
But then, my request's response from the Android application is
error: "access_denied"
error_description: "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'."
What can I do, to add correct handling of the X-XSRF-TOKEN for my cordova compiled Android app?
I ended up using the cordova-plugin-advanced-http, that is offering a response-cookie-fetching opportunity described here.
I've created a generic-http-service containg generic methods for each of the HTTP methods (GET,HEAD,PATCH,PUT,POST,DELETE), that is first checking for the running platform and then forwarding an adjusted request.
example for generic GET (pseudo-code):
// generic-http-service.ts
public get<T>(url: string, queryParams?: any): Observable<T> {
if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
// android-specific solution
// 1. adjust params
// 2. set general headers + the XSRF-TOKEN from the previous sendt request
// 3. return Observable(obs) {
// 4. send:
cordova.plugin.http.get(`${environment.baseUrl}/${url}`, adjustedParams, adjustedHeaders,
successResponse => {
// 5. fetch & save XSRF-TOKEN
obs.next(JSON.parse(successResponse.data) as T);
}, errorResponse => {
obs.error(errorResponse);
})
}
} else {
// web-specific solution based on the angular guide
return this.httpClient.get(`${url}`);
}
}
Afterwards I just needed to adjust my services a little bit.
I am currently using this library in my app: https://github.com/kexanie/MathView
which is used to convert text into maths, it uses TeX/MathJax.
This was working as expected:
MathView mv = new MathView(context, null);
mv.setEngine(MathView.Engine.MATHJAX);
mv.config("MathJax.Hub.Config({\n" +
"jax: [\"input/TeX\",\"output/HTML-CSS\"],\n" +
"displayAlign: \"left\"" +
"});"
);
mv.setText(context.getString(id));
where "id" pointed to a resource in strings.xml file.
Now, I changed it to be contained inside a file, and getting it from there.
MathView mv = new MathView(context, null);
mv.setEngine(MathView.Engine.MATHJAX);
mv.config("MathJax.Hub.Config({\n" +
"jax: [\"input/TeX\",\"output/HTML-CSS\"],\n" +
"displayAlign: \"left\"" +
"});"
);
String a= text;
mv.setText(a);
where text is received from the file, but is same as the earlier one in strings.xml, I logged that to verify.
But now the output is broken. It doesn't recognise the text correctly
"\frac{a}{b}" earlier used to be "a/b", now it is "fracab"
Is it a library issue?
I have used MathJax in angular4 project. It might help you out in your project as well.
use cdnjs link for mathjax library:
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
config=TeX-MML-AM_CHTML"></script>
create mathjax directive:
import {Directive, ElementRef, Input, OnChanges} from'#angular/core';
declare var MathJax:any;
#Directive({
selector : '[mathText]',
})
export class MathTextDirective implements OnChanges {
constructor(public elementRef: ElementRef) {
this.hostEl = elementRef.nativeElement; //capture the HTML
element host
}
//Used to bind data: eg: <div [mathText]="raw string">
#Input('mathText') inputString:string;
// host element
private hostEl:HTMLElement;
//have MathJax parse the host element and render the math
render(){MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.hostEl])}
// called when the inputString changes.
ngOnChanges(){
//make the input string into the innerText of the host element
this.hostEl.innerText = this.inputString;
this.render();
}
}
Register this directive in app.module.ts
and use this directive in html like:
<div [mathText]="\frac{a}{b}"></div>
Ionic printer plugin use Printer.print([html string], [printer options]) function to get print out using mobile app.
I need to create html template and update some values dynamically and use template as input for the print function.
Can anyone have any idea how to do this?
I am using ionic 2 and android platform.
It depends on what exactly want to print.
I would probably just create an HTML template inside your code and then replace the values before printing.
Example:
class Page {
template: string = `<h1>{title}</h1>
<p>This is a paragraph</p>
<p>{content}</p>`;
getHTML(title, content) {
let str = template;
str = str.replace('{title}', title);
str = str.replace('{content}', content);
return str;
}
printPage(title, content) {
let options = {};
this.p.print(getHTML(title, content), options).then(onSuccess, onError);
}
}
There are Android and iOS applications, I have dynamical URI and I need to redirect Android and iOS users directly to mobile application via nginx, only if they use this link.
But I don't understand how to handle it without "logical and" or "inner if".
As I understand I have to solve two conditions:
if ($http_user_agent ~* '(iphone|ipod|nokia|аndroid)' ) {
rewrite ^ mobile_application://$host$request_id last;
}
and:
set $my_uri sign-up?invitation=$key #this key is dynamical
if ($request_id = '($my_uri)' ) {
rewrite ^ mobile_application://$host$request_id last;
}
So, I have no idea how to fix it.
set $targeted_mobile no;
if ($http_user_agent ~* "android|iphone|ipod") {
set $targeted_mobile yes;
}
location /deep-link/ {
if ($targeted_mobile = yes) {
rewrite ^/deep-link/(.*) mobile://www.aaa.com/$1 permanent;
}
rewrite ^/deep-link/(.*) https://$server_name/$1 permanent;
I want to know how CakePhp 2.5 receive data post from Android
I want to know the following
1.URL to be sent from Android application
2.Methods of receiving data is POST (CakePhp)
I have tried many times,but I couldn't it.
Sending the data from the Android is neatly confirmed
1
Now I wrote the following URL.I don't know it is right.
http://*****/cake/books/test
2
BooksController.php
<?php
class BooksController extends AppController
{
public $name = 'Books';
public $uses = array('Book');
public function test()
{
$add = "";
if( isset($this->request->data['id']))
{
$add = $this->request->data['id'];
$this->set( 'address' , $add);
}
}
}
?>
test.ctp
<div>
<?php
if( isset($address) )
{
pr($address);
}
?>
</div>
In CakePHP you can use the following function to test is it is a POST request:
if($this->request->is('post')) {
...
}
Depending on the setup of your Webserver and CakePHP, the URL to post could also be:
http://*/books/test (without the cake part)
just order Android to post a URL example
www.sample.com/controller_name/function_name/123
, 123 is your code or variable
You can then use as simple function parameter
//in your controller
function register($uuid=null)
{
echo $uuid; //$uuid is value post by android, register() is function name
}