Cordova AJAX request without whitelist - ajax

I've been trying to make a ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "http://testing.com/ws/check?" + outputData,
success: onSuccess,
error: onError
});
But it fails with a 404 error, after a long search I found that I was missing the whitelist plugin but from what I've search Whitelist is only for Android 4+ and IOS 4+, will windows work? and blackberry?
is there a way to do this without adding whitelist?
If white list is really required why does it give me this error?
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
My html:
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
<!-- Setting environment up -->
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name='viewport' content='width=device-width, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi'>
<!-- -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<!-- Allow XHRs via https only -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">
<!-- Allow iframe to https://cordova.apache.org/ -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/jquery/jquery-1.11.3.min.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- -->
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<!-- -->
<!-- --------------- App init --------------- -->
<script src="js/app.js"></script>
<script src="js/Pages/SplashScreen.js"></script>
<script src="js/utils.js"></script>
<link rel="stylesheet" href="css/app.css" />
<!-- -->
<!-- Application Title -->
<title>Testing</title>
<!-- -->
</head>
<body ng-controller="AppController">
<!-- Cordova reference -->
<script src="scripts/index.js"></script>
<!-- -->
<!-- Navigator! Everything runs inside it! -->
<ons-navigator var="navi">
</ons-navigator>
<!-- -->
<!-- Templates -->
<!-- Splashscreen -->
<ons-template id="splashScreen.html" style="background:none">
<ons-page id="splashScreen" ng-controller="SplashScreenController">
<div id="splashScreen2" class="background_image">
<img id="background-image" width="100%" height="100%">
</div>
</ons-page>
</ons-template>
<!-- -->
<div id="result"/>
</body>
</html>
Thank you,
Joao

First You should install Cordova whitelist plugin(I think you have already it).
And after that add the following to config.xml file which is found in platforms/<platform name>/res/xml directory.
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

Related

Codeigniter 4 File not found

I have this problem where I had my site running. I used let's encrypt to install SSL certification. After this operation I changed my baseurl in both env and App.php files.
However my CSS files wont load (except one). I get 404 error for all except one file. https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css
I checked my paths I am sure the files are where they have to be.
Here some settings:
App.php:
public $baseURL = 'https://subdimain.domain.com/';
env:
app.baseURL = 'https://subdoian.domain.com/'
Here where I refer to my css files:
<script src="<?= base_url('plugins/jquery/jquery.min.js') ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?= base_url('plugins/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="<?= base_url('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') ?>">
<!-- iCheck -->
<link rel="stylesheet" href="<?= base_url('plugins/icheck-bootstrap/icheck-bootstrap.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('plugins/bootstrap/css/bootstrap.min.css') ?>">
<!-- JQVMap -->
<link rel="stylesheet" href="<?= base_url('plugins/jqvmap/jqvmap.min.css') ?>">
<!-- Theme style -->
<link rel="stylesheet" href="<?= base_url('dist/css/adminlte.min.css') ?>">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="<?= base_url('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') ?>">
<!-- Daterange picker -->
<link rel="stylesheet" href="<?= base_url('plugins/daterangepicker/daterangepicker.css') ?>">
<!-- summernote -->
<link rel="stylesheet" href="<?= base_url('plugins/summernote/summernote-bs4.min.css') ?>">
Here how they look like on page source:
<!-- jQuery -->
<script src="https://subdomain.domain.com/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://subdomain.domain.com/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/bootstrap/css/bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="https://subdomain.domain.com/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/summernote/summernote-bs4.min.css">
I am pretty sure all files are available. I even copy the after the domain part and directly ls the file on my server and it returns the file name.
Why only one of my css files can be loaded?
Resetting and restarting the nginx solved the problem.

Laravel Logout dropdown not showing after adding Bootstrap

After adding Bootstrap in my layout app.blade.php,the default logout dropdown option is not showing.I add the Bootstrap MaxCDN from here.How to fix it?
my laravel version is 5.7.21
And my app.blade.php holds everything default,i just add Bootstrap MaxCDN in the head tag.
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" ></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
you need to delete laravel's bootstrap links (app.css and app.js) from layout.blade

Spring Boot Thymeleaf Layout Dialect Not Working

I just created a new Spring Boot v1.5 project and facing issue where Thymeleaf Layout Dialect is not working.
I have the dependencies in my build.gradle and its on the classpath.
compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.1.2'
I have the following layout file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8" />
<title>Default Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="title" content="" />
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<!-- header -->
<header th:include="shared/nav-menu :: menu-admin" />
<!-- page content -->
<th:block>
<section layout:fragment="content"></section>
</th:block>
</body>
</html>
And file with content:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<title>Parameter Manager</title>
</head>
<body>
<section layout:fragment="content">
<h2>OMG I am on the page!</h2>
</section>
</body>
</html>
The HTML output is content.html file. It is not working as intended. The header and navigation menu should be part of the HTML output. Also the is in the page source which should not be the case.
Apparently the latest version of Thymeleaf Layout Dialect doesn't work with Spring Boot 1.5. Using version 1.2.9 and it works as expected.
compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '1.2.9'

Respond.js with twitter bootstrap on ie8 and below

i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.
I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
and here is the style.css:
#media only screen and (max-width: 38.75em) {
body {
background: green;
}
}
Regards
https://github.com/scottjehl/Respond#cdnx-domain-setup
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to #doctyper for the contributions in the cross-domain proxy!
You need to include <script src="./js/respond.min.js"></script> above the </head> tag.
If you don't want to add any code related with respond.js, load bootstrap.min.css through CDN except for IE 8. For IE 8, use local static file.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="{CDN Address}" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="{CDN Address}" />
<!--<![endif]-->
Tested on IE 8 ~ 11 and other webkit browsers.

Specifying unique content for <head> section using apache tiles

I'm brand new to Tiles so this is probably a very easy question. I've created a web application using Java / Spring 3 / JSPs without the use of tiles and now I'm realizing my life would be much easier with it.
I'm a bit confused on one aspect thus far, and that's defining the layouts. My problem is that in examples I've seen online you define a layout.jsp which contains the information (including tags and tags).
My question is, the "layout.jsp" file is supposed to be the generic "one-size-fits-all" type of file, but what happens when I create another file (say welcome.jsp) which should USE the layout template, but I need to define more and tags... if I define them inside of the welcome.jsp file then the rendered JSP file is not formatted correctly... i.e:
<head>
<!-- This is content from the layout.jsp file -->
<title>Welcome</title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<script type="text/javascript">
// some javascript
</script>
</head>
<body>
<!-- This is content from the welcome.jsp file which is malformed -->
<head>
<script src="js/jquery.mousewheel.min.js"></script>
</head>
</body>
Any help would be greatly appreciated.
Here's my tiles.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<definition name="baseLayout" template="/WEB-INF/jsp/layout/layout.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/jsp/layout/header.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/layout/footer.jsp" />
</definition>
<definition name="videos" extends="baseLayout">
<put-attribute name="title" value="Videos" />
<put-attribute name="body" value="/WEB-INF/jsp/videos.jsp" />
</definition>
</tiles-definitions>
layout.jsp
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%# include file="../tracking.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<title><tiles:insertAttribute name="title" ignore="true" /></title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<tiles:insertAttribute name="header" />
<tiles:insertAttribute name="body" />
<tiles:insertAttribute name="footer" />
</body>
</html>
Create a new definition to change the header content:
<definition name="baseLayout" template="/WEB-INF/jsp/layout/layout.jsp">
<!-- Defined here -->
<put-attribute name="head" value="" />
<put-attribute name="title" value="" />
...
</definition>
<definition name="videos" extends="baseLayout">
<!-- Overridden here -->
<put-attribute name="head" value="/WEB-INF/jsp/videos-additionalHeadDefinitions.jsp" />
...
</definition>
And add this to you layout.jsp:
<head>
<!-- This is content from the layout.jsp file -->
<title>Welcome</title>
...
<tiles:insertAttribute name="head" />
</head>

Resources