Hi,

I have no problem to connect to Firebase or access Firestore from web or Android.

But from iOS, when compiled like an app through Xcode it doesn’t work. It’s like the connection can’t be established. It’s what I suppose because I’m not able to see any logs. I took 3 days on this issue and can’t solve it… Here is what I’ve done so far :

On Firebase : created an iOS app too (required ? or just web app ?)

1. iOS app associated with the bundle id on Firestore (not sure it’s useful)
2. GoogleService-Info.plist added to the Xcode project

Try to log in

1. various tests carried out, it bugs at the signInAnonymously(auth) level it can’t be done.
2. On Firebase, I have activated the anonymous connection and I have the users (my tests) in anonymous connection who appear in the list of users

HTTPS

1. I have set NSAppTransportSecurity in the Info.plist for Xcode with NSAllowsArbitraryLoads in true

FYI : I think the problem is an https problem because I have 2 bugs: Firebase, I have nothing in result or in console logs so clearly there are 0 connections. I have another connection to a Google API via a GCP call which does not succeed but there the problem is explicit it is because of the CORS (I have console logs for that one).

DEBUG

1. I tested setLogLevel(“debug”); which works great in web/android but nothing on iOS

If someone has a sample project which works with Firestore or know a link to it, I’ll be very happy to try it.

Thanks in advance for your help,
Thomas

I’m integrating a payment provider that uses a 3D Secure authentication iframe. The flow is as follows:

1. The payment provider returns an HTML string for the 3D Secure authentication.
2. This HTML is set as the srcdoc of an iframe in our app.
3. Upon successful payment, the iframe redirects to a success URL (which we can configure in the payment provider’s panel).

To handle the redirect, I’m using our API server (different from the Capacitor webapp server) as the redirect target. This requires setting the CSP_FRAME_ANCESTORS on our API server to allow it to be framed by our webapp and Capacitor apps.

Currently, I have:
CSP_FRAME_ANCESTORS = ("'self'", "https://*.mywebapp.com", "file:", "my_app://")

This works for the web app but not for iOS and Android Capacitor apps. Interestingly, using "*" works for the webapp but still fails for mobile apps.

Questions:

1. What CSP_FRAME_ANCESTORS configuration would allow framing in both web and Capacitor apps (iOS/Android)?
2. Are there any Capacitor-specific considerations for handling iframes and CSP?
3. Is there a better approach to handle 3D Secure redirects in a Capacitor app?

Any insights or best practices would be greatly appreciated!

I’m facing the same error. Did someone find the problem or solution?

I have the same problem updating from Angular 18 to 19. Triying to deploy the Ionic Angular app shows this error

I guess this error is because angular 18 used “builder”: “@angular-devkit/build-angular:browser” and now Angular 19 uses “builder”: “@angular-devkit/build-angular:application”

I meant the actual contents of your index.html file.

For example, my production build includes JS and CSS with hashed file names (Vue & Vite):

<script type="module" crossorigin src="/assets/index-DkNNhdK7.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C_GInD0z.css">

In an Angular 17 project something like this (looking in dist or www folder):

<script src="runtime.f5a50f1e54b6977d.js" type="module"></script>
<script src="polyfills.c3a9e4b87df5be46.js" type="module"></script>
<script src="main.a0fe3c2c74a4dd90.js" type="module"></script>

This is an example of my file. It does not look like it is being hashed.

`

Do we need to enable this hash option for file names,

(post deleted by author)

Doesn’t look like your file came through.

Either way, the Angular 17 app I am looking at has "outputHashing": "all" in it’s angular.json file under projects -> app -> architect -> build -> configurations -> production.

This is what i have

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/swiper/swiper-bundle.min.css",
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "allowedCommonJsDependencies": [
              "apexcharts",
              "highcharts",
              "moment",
              "quill",
              "quill-delta"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            },
            "ci": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@ionic/angular-toolkit"
    ],
    "analytics": "4da92a43-75b3-4104-9c9e-e16caf888cb6"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

Under “build”: {}, there does not seem to be
configurations → production

I found a solution to deploy ionic-angular 19.x to Vercel. You have to change the builder options inside angular.json.

Change “builder”: "@angular-devkit/build-angular:application
To “builder”: “@angular-devkit/build-angular:browser-esbuild”

Change “outputPath”:{“base”: “www”}
To “outputPath”: “www”

Change “browser”:“sr/main.ts”
To “main”:“sr/main.ts”

This works for me and now I can deploy my ionic/angular app in Vercel. I think the problem is the new Angular’s builder “application”. It includes some nodejs modules for Server Side Rendering and that is not allowed in Vercel.

(I apologize, my first language is Spanish not English)

Capacitor may require additional handling for iframe embedding, especially for mobile, to ensure the app’s security settings and app-specific configurations align with the CSP rules.

If upgrading is too complex, manually creating the privacy manifest could be a good temporary fix. Extract the necessary info from Firebase 10.22.0 and other SDKs. Upgrading later might be easier long-term. Hope this helps!

My understanding is that the Capgo plugin works for monolithic apps. Does the Capgo plugin support micro frontends?

Thanks for the response. I have done this but still getting the same errors.

Do I need to add a privacy manifest for each SDK as well?
Where would I add these if so.

Seems like this is saying I need to add multiple privacy manifests not just a single main one.

Im using ionic 7 with capacitor with angular

this is my code

step9.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>camera</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="cameraPreview" class="cameraPreview">
    <div *ngIf="cameraActive">
      <img src="assets/icon/guide.png" class="image-overlay">
      <ion-button (click)="stopCamera()" expand="full" id="close">
        <ion-icon name="close-circle" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button (click)="captureImage()" expand="full" id="capture">
        <ion-icon name="camera" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button (click)="flipCamera()" expand="full" id="flip">
        <ion-icon name="repeat" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  </div>
  <ion-img [src]="image" *ngIf="image && !cameraActive"></ion-img>
  <ion-button (click)="openCamera()" expand="full" *ngIf="!cameraActive">Open Camera</ion-button>
  <ion-button (click)="stopCamera()" expand="full" *ngIf="cameraActive">Open Camera</ion-button>
</ion-content>

step9.page.scss

ion-content {
    --background: transparent !important;
  }
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  
  .cameraPreview {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .image-overlay {
    z-index: 1;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
  }
  
  #capture {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    z-index: 11;
  }
  #close {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 175px);
    width: 50px;
    height: 50px;
    z-index: 11;
  }
  #flip {
    position: absolute;
    bottom: 30px;
    left: calc(50% + 125px);
    width: 50px;
    height: 50px;
    z-index: 11;
  }
  
  #close::part(native) {
    border-radius: 30px;
  }
  #capture::part(native) {
    border-radius: 30px;
  }
  #flip::part(native) {
    border-radius: 30px;
  }

Step9.page.ts

import { Component, OnInit } from '@angular/core';
import { ToastService } from '../../../services/toast/toast.service';
import { LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';
import { CameraPreview, CameraPreviewOptions, CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';


@Component({
  selector: 'app-step9',
  templateUrl: './step9.page.html',
  styleUrls: ['./step9.page.scss'],
})
export class Step9Page implements OnInit {

  parametro : any;
  fileTransfer : any;
  image: any  = null; //Base64 to save
  imagePreview: any = null; //For displaying on screen
  cameraActive = false;

  constructor(
    private loadingController: LoadingController,
    private toastService: ToastService,
    private router: Router
  ) { }

  ngOnInit() {
    this.openCamera();

  }

  flipCamera() {
    CameraPreview.flip()

  }

  openCamera() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      disableAudio: true,
      height: 1920,
      width: 1080
    };
    CameraPreview.start(cameraPreviewOptions);
    document.body.classList.add('camera-active');

  }

  async stopCamera() {
    console.log('Stopping Camera');
    await CameraPreview.stop();
    this.cameraActive = false;
  }

  async captureImage() {
    const CameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality: 50
    }

    const result = await CameraPreview.capture(CameraPreviewPictureOptions)

    this.imagePreview = 'data:image/jpeg;base64,' + result.value;
    this.image = result.value;

    this.stopCamera();

  }

}

global.scss

  body.camera-active {
    --background: transparent;
    --ion-background-color: transparent;
  }

unfortunately it doesnt work

I am using ion-infinite-scroll with cdk-virtual-scroll-viewport but i have problem that when I scroll on the bottom that ionInfinite is not called

       <ion-content [scrollY]="false">
            <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
                <ion-refresher-content></ion-refresher-content>
            </ion-refresher>
            <cdk-virtual-scroll-viewport class="ion-content-scroll-host" itemSize="47" minBufferPx="900" maxBufferPx="1350">
                
                <ion-list>
                    <ion-item *cdkVirtualFor="let item of list">
                        {{ item.id }}
                    </ion-item>
                </ion-list>
            </cdk-virtual-scroll-viewport>

            <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </ion-content>

with css

.ion-content-scroll-host::before,
.ion-content-scroll-host::after {
    position: absolute;

    width: 1px;
    height: 1px;

    content: "";
}

.ion-content-scroll-host::before {
    bottom: -1px;
}

.ion-content-scroll-host::after {
    top: -1px;
}

cdk-virtual-scroll-viewport {
    height: 100%;
    width: 100%;
}

Thanks for the info, this was one of my concerns about getting into the ionic ecosystem.

When I whitelisted the following:

"'self'", 
"https://*.mywebapp.com", # web
"ionic://", # iOS
"http://localhost:*" # Android

it worked.